我使用 onBlur 以关闭下拉菜单,但我也想处理 li 元素的点击事件,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>
);
}