javascript - 单击其他元素/主体失败时 react 切换并关闭

Question

我想在用户单击某个元素时触发展开状态，但当用户使用 ref 单击外部时我未能实现关闭该元素。

这部分有问题:

handleClick = e => {
    if (this.node.contains(e.target)) {
      this.setState({
        expand: !this.state.expand // doesn't work?
      },()=>console.log(this.state.expand));

      return;
    }

    this.handleClickOutside();
  };

控制台触发了两次。

https://codesandbox.io/s/71l34po56x

如果您只需在handleClick中将expand的状态更改为true，您就可以看到几乎可以工作的结果，但是我怎样才能实现两件事。

1. 用户可以切换内容。
2. 用户点击内容或处理程序外部，内容将关闭。

Answer 1

问题是您将相同的事件处理程序 handleClick 附加到 div 两次(一次在 render 函数中，一次在 componentWillMount)。

这就是为什么当您单击 div 时，您会设置状态两次，结果 expand 从 false 变为 true，然后从 true 变为 false。