React组件DOM事件（onBlur与onClick）触发顺序问题求解

这个问题其实很常见，本质是浏览器的事件触发顺序导致的：当你点击列表项时，输入框的blur事件会先于列表项的click事件触发，而blur事件里的setState({ hide: true })会立刻隐藏列表，导致列表项已经从DOM中移除，click事件自然无法触发。

下面给你几种优雅的通用解决方案：

方案一：用mousedown替代click事件 #

mousedown事件的触发时机早于blur事件，所以我们可以把列表项的选择逻辑放到onMouseDown事件中，这样就能保证选择逻辑先执行，之后再处理输入框的blur隐藏列表，完全不会冲突。

修改你的列表项组件：

class DatalistOption extends React.Component {
  handleMouseDown = (evt) => {
    console.log("onMouseDown for Option called");
    this.props.select(evt);
    // 如果你希望输入框保持焦点，可以加上这行，否则不用
    // evt.preventDefault();
  }

  render() {
    return (
      <div 
        className="option"
        onMouseDown={this.handleMouseDown}
      >
        {this.props.value}
      </div>
    );
  }
}

这种方法最简单直接，几乎不需要额外的逻辑，用户体验也没有任何影响。

方案二：在onBlur中判断焦点去向再决定是否隐藏 #

我们可以利用事件对象的relatedTarget属性，判断输入框失去焦点后，焦点是否转移到了列表项上。如果是，就暂时不隐藏列表；如果不是（比如点击了页面其他区域），再执行隐藏操作。

首先给列表容器添加一个ref，然后修改handleInputBlur：

class ReactDatalist extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hide: false };
    this.listRef = React.createRef();
  }

  handleInputBlur = (evt) => {
    // 检查失去焦点后，新的焦点元素是否在列表容器内
    const targetInList = evt.relatedTarget && this.listRef.current.contains(evt.relatedTarget);
    if (!targetInList) {
      this.setState({ hide: true });
    }
  }

  render() {
    return (
      <div className="datalist-container">
        <input
          type="text"
          onBlur={this.handleInputBlur}
          // 其他输入框属性...
        />
        {!this.state.hide && (
          <div ref={this.listRef} className="options-list">
            {/* 渲染列表项 */}
            {this.props.options.map(opt => (
              <DatalistOption 
                key={opt} 
                value={opt} 
                select={/* 你的选择回调 */}
              />
            ))}
          </div>
        )}
      </div>
    );
  }
}

这种方法更灵活，适合需要保留click事件逻辑的场景，而且能精准控制列表的显示隐藏时机。

方案三：用requestAnimationFrame替代setTimeout（过渡方案） #

如果你暂时不想修改事件类型或者添加ref，也可以用requestAnimationFrame替代500ms的setTimeout，它会在下一帧执行状态更新，时间远短于500ms，用户几乎感觉不到延迟：

handleInputBlur = () => {
  requestAnimationFrame(() => {
    this.setState({ hide: true });
  });
}

不过这种方法本质还是延迟执行，属于过渡方案，不如前两种优雅。

最后推荐优先选择方案一，实现成本最低，效果最好。

内容的提问来源于stack exchange，提问作者Sergej Herbert