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

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() 方法的位置。每当我单击下拉列表中的 "One" 元素时，它都会打印出 "Button clicked" 但屏幕上不会呈现任何内容。任何帮助是极大的赞赏。提前致谢！

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 在一个动作后调用渲染中的一个函数

ReactJS Call a function in render after an action

reactjs

polaris