使用onBlur和onFocus反应打开和关闭菜单失败

Question

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

演示http://jsfiddle.net/dL99rx27/

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>
        );
    }
}

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