1

我正在使用 ReactJS 和 shopify 的 Polaris 来创建一个网站。我对反应很陌生，所以这可能是一个新手问题，但我查看了互联网，无法将各个部分组合在一起。

我有一个下拉列表，基本上每当用户单击列表中的项目时，我都想在下拉列表旁边添加一个按钮。这是我的代码：

import React from "react";
import { ActionList, Button, List, Popover } from "@shopify/polaris";

export default class ActionListExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      active: false,
      title: "Set Period",
    };
  }

renderButton() {
    console.log("Button clicked")
    return (
      <div>
        <Button fullWidth={true}>Add product</Button>;
      </div>
    );
 }

togglePopover = () => {
this.setState(({ active }) => {
  return { active: !active };
});
};

render() {
  const activator = (
    <Button onClick={this.togglePopover}>{this.state.title}</Button>
  );
return (
  <div style={{ height: "250px" }}>
    <Popover
      active={this.state.active}
      activator={activator}
      onClose={this.togglePopover}
    >
      <ActionList
        items={[
          {
            content: "One",
            onAction: () => {
              this.setState({ title: "One" }, function() {
                this.togglePopover();
                this.renderButton() //THIS IS WHERE I CALL THE METHOD
              });
            }
          }
        ]}
      />
    </Popover>
  </div>
);
}
}

我在代码中添加了注释以显示我调用 renderButton() 方法的位置。每当我单击下拉列表中的“One”元素时，它会打印出“Button clicked”，但没有任何内容呈现到屏幕上。任何帮助是极大的赞赏。提前致谢！

4

3 回答 3

2

您需要添加另一个变量来检查是否单击了某个项目，并且正如@azium 评论的那样，您需要将输出添加到您的 JSX，而不是在onAction函数内部。

截至目前，您在Popper单击项目时关闭，设置this.state.active为false，因此您不能依赖它来呈现您的按钮。您需要添加类似this.state.isButton或其他内容，并onAction包括：

onAction: () => {
  this.setState({ title: "One", isButton: true }, () => {
    this.togglePopover();
   });
}

然后在你的 JSX 中：

{this.state.isButton && this.renderButton()}
于 2018-09-17T19:04:18.497 回答
0

这是条件渲染的完美用例。
您基本上想根据条件（在这种情况下为您的状态的布尔值）呈现组件。

正如您在文档中看到的那样，可以编写条件渲染的几种方式。

在你的情况下，我会这样做： 

return (
  <div style={{ height: "250px" }}>
    <Popover
      active={this.state.active}
      activator={activator}
      onClose={this.togglePopover}
    >
      <ActionList
        items={[
          {
            content: "One",
            onAction: () => {
              this.setState({ title: "One" }, function() {
                this.togglePopover();
              });
            }
          }
        ]}
      />
      {this.state.active && this.renderButton()}
    </Popover>
  </div>
);
}
}

请注意，我只是将它放置在一个随机位置，您可以随意将其移动到标记中需要它的任何位置。

于 2018-09-17T21:03:33.190 回答
-1

感谢大家的帮助，我终于能够做到这一点。我在名为 isButton 的状态中放置了一个额外的属性，并且最初将其设置为 false。这是我的渲染功能：

render() {
 const activator = (
   <Button onClick={this.togglePopover}>{this.state.title}</Button>
 );
return (
  <div style={{ height: "250px" }}>
    <Popover
      active={this.state.active}
      activator={activator}
      onClose={this.togglePopover}
    >
      <ActionList
        items={[
        {
        content: "One",
        onAction: () => {
          this.setState({ title: "One", isButton: true }, function() { //Set isButton to true
            this.togglePopover();
          });
        }
      }
    ]}
  />
{this.state.isButton && this.renderButton()} //ADDED HERE
</Popover>
  </div>
);
}

请查看评论以了解代码更改的位置。谢谢！

于 2018-09-17T22:59:46.207 回答