Javascript 使用onBlur和onFocus对打开和关闭菜单作出反应失败

我尝试创建一个下拉菜单，使用onFocus和onBlur。我不使用onClick是有原因的，因为使用onFocus和onBlur时，如果我有多个下拉菜单，我不需要手动关闭菜单，例如单击菜单1，打开的菜单2将关闭。但我有一个问题，如果复选框是菜单内容的一部分，我就不能让它工作

演示

类下拉列表扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
开放：假
}
}
render（）{
返回(
this.setState（{open:true}）}
onBlur={（）=>this.setState（{open:false}）}
>
菜单

{this.props.children}
)
}
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
警报（'link 1'）}>link 1
警报（'link 2'）}>link 2
);
}
}

---

如何不触发onBlur以避免用户单击复选框时关闭菜单内容？

一次只能有一个元素具有焦点。因此，当您单击

复选框

，焦点将从div转移到

复选框

。因此，您可以从子元素回调到父元素，以告知其仍处于焦点，或者更改您的体系结构。一次只能有一个元素具有焦点。因此，当您单击

复选框

，焦点将从div转移到

复选框

。因此，您可以从子级回调到父级，以告知其仍处于焦点状态，或者更改您的体系结构。

class Dropdown extends React.Component {
        constructor(props) {
        super(props);
      this.state = {
         open: false
      }
    }

   render() {
      return(
      <div
        tabIndex="1"
        onFocus={() => this.setState({open: true})}
        onBlur={() => this.setState({open: false})}
      >
        <p>Menu</p>
        <div style={this.state.open === false ? {display: 'none'} : {display: 'block'} }>
        {this.props.children}
        </div>
        </div>
      )
   }
}

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

    }

    render() {
        return (
            <div>
          <Dropdown>
            <li onClick={() => alert('link 1')}>link 1</li>
            <li onClick={() => alert('link 2')}>link 2</li>
            <input type="checkbox" label="check"/>
          </Dropdown>
          </div>
        );
    }
}