以编程方式导致 onBlur 在反应中触发

Question

我使用 onBlur 关闭下拉列表，但我也想处理在其中呈现的 li 的单击处理程序，setState 在这里不起作用，当用户尝试再次打开下拉列表时行为被破坏，请在此处尝试：

http://jsfiddle.net/ur1rbcrz

我的代码：

toggleDropdown = () => {
    this.setState({
        openDropdown: !this.state.openDropdown
    })
  }

  render() {
    return (
      <div>
        <div tabIndex="0" onFocus={this.toggleDropdown} onBlur={this.toggleDropdown}>
          MyList
        <ul className={this.state.openDropdown ? 'show' : 'hide'}>
          <li>abc</li>
          <li>123</li>
          <li onClick={()=> this.setState({openDropdown:false})}>xyz</li> {/* not working */}
        </ul>
      </div>
      </div>
    );
  }

Answer 1

您的代码不起作用，因为即使您仍然关注带有事件click li的div容器onBlur。

我们添加到您的列表容器中ref，之后我们可以调用.blur(). 我们在您的onClick li事件处理程序中使用它。

this.dropDownList.blur()

请参阅工作示例jsfiddle。

或者运行这个片段：

this.dropDownList.blur()

class Hello extends React.Component {
  constructor() {
    super()
    this.state = {
      isDropdownVisible: false
    }
    
    this.toggleDropdown = this.toggleDropdown.bind(this);
  }
  
  toggleDropdown() {
  	this.setState({
    	isDropdownVisible: !this.state.isDropdownVisible
    })
  }
  
  render() {
    return (
      <div>
        <div 
        tabIndex="0" 
        ref={c => this.dropDownList = c}
        onFocus={this.toggleDropdown} 
        onBlur={this.toggleDropdown}>
          MyList
        <ul
        className={this.state.isDropdownVisible ? 'show' : 'hide'}>
          <li>abc</li>
          <li>123</li>
          <li onClick={() => this.dropDownList.blur()}>xyz</li> {/* not working */}
        </ul>
      </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Hello initialName="World"/>,
  document.getElementById('container')
);

.hide {
  display: none
}

.show {
  display: block !important;
}

div:focus {
  border: 1px solid #000;
}

div:focus {
		outline: none;
	}