React Tippy - 使用方法 setIsOpen()

Question

我正在使用 React Tippy - 一个基于 Tippy.js 的 React 组件。我想使用 documented setIsOpen method - 但它不起作用。

TypeError: setIsOpen is not a function.

似乎找不到与此相关的任何文档或问题。有什么想法吗？

我的代码是：

<Tooltip
  position="right"
  animation="scale"
  arrow="true"
  arrowSize="big"
  theme="light"
  trigger="click focus"
  interactive
  open={open}
  html={(
    <div className="tooltip-body">
      <span className="info icon-sm-info"></span>
      <span className="close" onClick={() => { setIsOpen(false) }}>&#215;</span>
      <h5>Hello</h5>
      <div>Tooltip Content</div>
    </div>
  )}
>
<span className="icon-sm-info">Hello</span>
</Tooltip>

Answer 1

你的状态：

this.state = {open : false}

setIsOpen = () => {
this.setState(state => { open : true});
}

更新代码

<Tooltip
  position="right"
  animation="scale"
  arrow="true"
  arrowSize="big"
  theme="light"
  trigger="click focus"
  interactive
  open={open}
  html={(
    <div className="tooltip-body">
      <span className="info icon-sm-info"></span>
      <span className="close" onClick={() => { this.setIsOpen() }}>&#215;</span>
      <h5>Hello</h5>
      <div>Tooltip Content</div>
    </div>
  )}
>
<span className="icon-sm-info">Hello</span>
</Tooltip>

Answer 2

我找到了如何使用状态来做到这一点。

class ToolTip extends React.Component {
   constructor(props) {
      super(props);

      this.state = {
         open: false
      }
   }

   setIsOpen = (option) => {
      this.setState({
         open: option
      });
   }

<span className="close" onClick={() => {this.setIsOpen(false)}}>&#215;</span>

React Tippy - 使用方法 setIsOpen()

React Tippy - Using method setIsOpen()

javascript

reactjs

tippyjs