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）是否为INPUT，因为输入会改变焦点。这应该有效，我为名为 inpClick 的状态添加了一个新属性，当点击该组件中的输入时，该属性将变为true。

在此处查看演示

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

阻止检查onBlur上触发的复选框

2 个答案: