Question

我开发了一个带有搜索输入的React Dropdown元素。每当输入元素被聚焦时，Dropdown显示并且在移除焦点时，Dropdown将从DOM中移除（同样从下拉列表中选择一个选项）。但是当我切换面板时，我遇到了一个问题。

我们说我的屏幕上打开了两个浏览器窗口。输入集中在一个窗口中。我搬到另一个窗口。输入焦点丢失，Dropdown消失。但是当我点击我的Dropdown组件出现的位置时，输入会在我切换窗口时立即获得焦点，并且点击Dropdown中的选项。它发生得如此之快，以至于我们从未看到Dropdown但是会自动选择。 我想避免输入元素每次从另一个窗口返回时获得焦点。我尝试在输入元素上设置tabIndex="-1"，但它没有用。

我的下拉代码：

constructor(props){
  super(props);
  this.state = {
    value : '',
    open : false,
  }
}

showDropdown = (e) => {
  this.setState(prevState => {
    return { open : !prevState.open}
  })
}

    render() {
      return (  
          <div className="multi-select-option">
            <input value={this.state.value} placeholder="Add more .." tabIndex="-1" onFocus={this.showDropdown} onBlur={this.showDropdown}
            onChange={this.searchChange} onKeyDown={this.checkKeyDown}/>
            {this.state.open ?
              <div className="multi-select-dropdown">
              {this.props.options.map(option => {
               <div className="multi-select-row"
                onMouseDown={() => this.selectRow(option)}>
                  <span>{option}</span>
                  </div> 
              })}
              </div> : ""
            }

          </div>
      );
    }

我使用onMouseDown而不是onClick，因为onMouseDown在模糊事件之前被触发，这就是我如何注册点击，因为事件周期是这样的

（鼠标按下 - ＆gt;模糊 - ＆gt;鼠标按下 - ＆gt;点击）

提前致谢。

切换窗口不会使输入失去焦点

0 个答案: