Javascript 以编程方式使onBlur在react中触发

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

我的代码：

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

---

您的代码不起作用，因为即使单击li，带有onBlur事件的div容器仍然是焦点

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

this.dropDownList.blur()

参见工作示例

或者运行以下代码段：

类Hello扩展了React.Component{ 建造师{ 超级的 此.state={ isDropdownVisible:false } this.toggleDropdown=this.toggleDropdown.bindthis； } 切换下拉列表{ 这是我的国家{ isDropdownVisible:！this.state.isDropdownVisible } } 渲染{ 回来 this.dropDownList=c} onFocus={this.toggleDropdown} onBlur={this.toggleDropdown}> 迈利斯特 abc 123 this.dropDownList.blur}>xyz{/*不工作*/} ; } } ReactDOM.render , document.getElementById'container' ; .隐藏{ 显示：无 } .表演{ 显示：块！重要； } 新闻组：焦点{ 边框：1px000； } 新闻组：焦点{ 大纲：无； }

---

我将onClick事件添加到您的div中，它成功了，您的代码变成：

  render() {
return (
  <div>
    <div tabIndex="0" onClick={() => this.setState({openDropdown: !this.state.openDropdown})} 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>
);

---

}

OnBlur是一种反应合成事件，可通过两种方式使用：

触发某事： const{useState}=React； 常量示例={title}=>{ const[field，setField]=useState； 回来 {title}

模糊上的大写字母

setFielde.target.value} //看这里！ onBlur={e=>setFielde.target.value.toUpperCase} /> ; }; //渲染它 ReactDOM.render , document.getElementByIdreact ;

---

我使用toggle而不是hide and show处理程序是为了避免2函数。@CeldricKang用这种方式调试和维护代码更容易。代码正常，我看不出有问题。@CeldricKang让我更新，所以我们可以使用toggle而不是show，hide。@CeldricKang好的，我已经更新了答案。如果您觉得合适，请接受。