ReactJS自定义下拉菜单首个菜单项onClick点击事件失效问题

• 事件触发顺序冲突：输入框onBlur事件优先级高于菜单项onClick，点击菜单项时输入框先失焦触发隐藏逻辑，菜单被销毁后点击事件无法执行，导致取值失败。
• DOM取值逻辑缺陷：selectValue方法从事件目标的后代节点查找span内容，若点击的是菜单项内的图标元素，事件目标无后代span会直接取值失败，首个菜单项通常带默认图标，因此更容易触发该问题。
• 原生DOM操作脱离React状态管理：手动修改classList控制显隐，和React渲染逻辑脱节，容易出现状态不同步。
• 根节点缺失：render方法返回两个同级节点不符合React语法要求，会导致DOM结构异常，closest查找.select容器失败。

核心思路是规避事件顺序冲突，用React状态统一管理组件行为，替换不可靠的DOM操作和setTimeout hack。

修复后完整代码 #

Select组件 #

class Select extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectValue: '',
      isMenuOpen: false
    };
    this.selectRef = React.createRef();
  }

  componentDidMount() {
    // 点击组件外区域自动关闭菜单
    document.addEventListener('mousedown', this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside);
  }

  handleClickOutside = (e) => {
    if (this.selectRef.current && !this.selectRef.current.contains(e.target)) {
      this.setState({ isMenuOpen: false });
    }
  };

  showList = () => {
    this.setState({ isMenuOpen: true });
  };

  selectValue = (value) => {
    this.setState({
      selectValue: value,
      isMenuOpen: false
    });
  };

  changeSelectValue = (e) => {
    this.setState({ selectValue: e.target.value });
  };

  render() {
    return (
      <div className={`select ${this.state.isMenuOpen ? 'active' : ''}`} ref={this.selectRef}>
        <input
          {...this.props}
          type="text"
          placeholder={this.props.placeholder}
          onFocus={this.showList}
          value={this.state.selectValue}
          onChange={this.changeSelectValue}
          required
        />
        <div className="select-options menu full-width">
          {this.props.list.map((element, index) => (
            <MenuItem
              key={index}
              text={element}
              onMouseDown={(e) => {
                e.preventDefault();
                this.selectValue(element);
              }}
            />
          ))}
        </div>
      </div>
    );
  }
}

MenuItem组件（无需修改） #

class MenuItem extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <p className={`menu-item ${this.props.type}`} {...this.props}>
        {this.props.icon ? <i className={this.props.icon}></i> : null}
        <span>{this.props.text}</span>
      </p>
    );
  }
}

提示：上述代码将active类绑定在外层.select容器上，和原有逻辑一致，无需修改原有CSS样式。

关键优化点 #

1. 用onMouseDown替代onClick绑定菜单项事件，通过e.preventDefault()阻止输入框失焦，从根源避免事件顺序冲突
2. 直接传递菜单项值到选择方法，完全规避DOM取值的不可靠问题
3. 用isMenuOpen状态控制菜单显隐，替代原生classList操作，状态和渲染完全同步
4. 增加全局点击判断，点击组件外区域自动关闭菜单，符合下拉组件的通用交互标准
5. 补全外层根节点包裹，符合React语法要求，DOM结构和预期一致

内容的提问来源于stack exchange，提问作者Ahmad Sami