在 React 中单击组件外部时更改状态

Question

我有一个下拉菜单，如下图所示：

当我单击文件夹图标时，它会打开和关闭，因为 showingProjectSelector 属性处于设置为 false 的状态。

   constructor (props) {
    super(props)
    const { organization, owner, ownerAvatar } = props
    this.state = {
      owner,
      ownerAvatar,
      showingProjectSelector: false
    }
  }

当我单击该图标时，它会正确打开和关闭。

 <i
  onClick={() => this.setState({ showingProjectSelector: !this.state.showingProjectSelector })}
  className='fa fa-folder-open'>
</i>

但我想要做的是在我点击下拉菜单外部时关闭下拉菜单。我如何在不使用任何库的情况下执行此操作？

这是整个组件： https ://jsbin.com/cunakejufa/edit?js,output

原文由 Lizz Parody 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以尝试利用 onBlur ：

 <i onClick={...} onBlur={() => this.setState({showingProjectSelector: false})}/>

原文由 Arman Charan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我和你遇到了同样的问题。阅读本文后解决： Detect click outside React component 请尝试：

原文由 smartworld-dm 发布，翻译遵循 CC BY-SA 3.0 许可协议