Запретить проверку на флажок срабатывает на Blur

Question

Я создаю выпадающее меню, используя onFocus и onBlur. Есть причина, по которой я не использую onClick, потому что onFocus и onBlur мне не нужно закрывать меню вручную, если у меня есть несколько раскрывающихся списков.

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.

Демо http://jsfiddle.net/dL99rx27/

Как предотвратить включение onBlur при нажатии на флажок? Я использую onClick, у него нет такой проблемы.

Answer 1

Вы пытаетесь изменить следующее утверждение:

 onBlur={() => this.setState({open: false})}

в

 onBlur={() => this.setState({open: true})} 

Answer 2

Проверьте, является ли выбранный элемент (используя mousedown) входом, потому что входы меняют фокус. Это должно сработать, я добавил новый атрибут для состояния, называемого inpClick, который станет истинным при нажатии на вход в компоненте.

Проверьте демо здесь

http://jsfiddle.net/prabushitha/ed9yxun9/1/

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

   render() {
      return(
      <div
        tabIndex="1"
        onFocus={() => this.setState({open: true})}
        onBlur={() => {
           if(!this.state.inpClick){
            this.setState({open: false});
           }else{
            this.setState({inpClick: false});
           }
          }
         }

          onMouseDown={(e)=>{
             if(e.target.nodeName=="INPUT"){
               this.setState({inpClick: true});
             }
            }
           }
      >
        <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>
          <div>
            <li onClick={() => alert('link 1')}>link 1</li>
            <li onClick={() => alert('link 2')}>link 2</li>
            <input type="checkbox" label="check" />
            <li onClick={() => alert('link 2')}>link 2</li>
            </div>
          </Dropdown>
          </div>
        );
    }
}

React.render(<App />, document.body);