Question

我正在使用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（）方法。每当我单击下拉菜单中的“一个”元素时，它都会打印出“单击按钮”，但屏幕上不会呈现任何内容。任何帮助是极大的赞赏。预先感谢！

Answer 1

您需要添加另一个变量来检查是否单击了某个项目，并且正如@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()}

Answer 2

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

可以按几种方式编写条件渲染as you can see in the docs。

在您的情况下，我会选择这样的东西：

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>
);
}
}

请注意，我只是将其放置在随机的位置，可以随时将其移动到标记中需要的位置。

Answer 3

感谢大家的帮助，我终于能够做到这一点。我在状态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>
);
}

请查看注释以查看代码更改的地方。谢谢！

ReactJS在动作后调用渲染中的函数

3 个答案: