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

Posted 2023-03-23

【中文标题】如何在 reactstrap 的 Popovers 中正确使用延迟？

【英文标题】：How to use delay correctly in Popovers of reactstrap?

【发布时间】：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 时发生.

【参考方案1】：

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

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