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

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


当我单击文件夹图标时，它会打开和关闭，因为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

最佳答案

您可以尝试利用onBlur:

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

关于javascript - 在React中在组件外部单击时更​​改状态，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48674246/