如何在 reactstrap 的 Popovers 中正确使用延迟？答案

【问题标题】：How to use delay correctly in Popovers of reactstrap?如何在 reactstrap 的 Popovers 中正确使用延迟？
【发布时间】：2018-06-30 04:43:23
【问题描述】：

我阅读了Popovers' doc。我尝试在 Popover 上使用delay，但延迟不起作用。

我做错了吗？

Live version

  constructor() {
    super();

    this.state = {
      popoverOpen: false
    };
  }

  toggle = () => {
    this.setState({
      popoverOpen: !this.state.popoverOpen
    });
  };

  render() {
    return (
     <div>
        <Button id="Popover1" onClick={this.toggle}>
          Launch Popover
        </Button>
        <Popover delay={2000} placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" toggle={this.toggle}>
          <PopoverHeader>Title</PopoverHeader>
          <PopoverBody>Body</PopoverBody>
        </Popover>
      </div>
    );
  }

【问题讨论】：

“但延迟不起作用”到底是什么意思？会发生什么？
@RishikeshDhokare '延迟不起作用'意味着没有延迟
这看起来像一个合法的错误：github.com/reactstrap/reactstrap/blob/master/src/Popover.js#L86 它只在 this.props.isOpen 为 true 时调用 show ，而有趣的超时内容仅在调用 show 并且 this.props.isOpen 为 false 时发生.

标签： javascript reactjs reactstrap

【解决方案1】：

如果延迟道具不起作用，您可以随时对您的toggle func 执行此操作

toggle = () => {
 setInterval(() => {
   this.setState({ popoverOpen: !this.state.popoverOpen });
 }, 2000)   
};

【讨论】：