React组件中Enter键触发if else双分支问题及解决需求

我正在开发一个简易下拉菜单，通过监听Enter按键结合DOM操作和状态切换更新菜单外观。当前遇到的问题是：按下Enter键时，代码会先执行菜单打开逻辑，紧接着又执行关闭逻辑，导致菜单状态来回切换，无法完成一次正常的打开/关闭操作。

原代码如下：

componentDidMount() {
  window.addEventListener('keydown', e => {
    // This listens for a key press
    if (e.key === 'Enter') {
      if (this.state.menuIsOpen === false) {
        menuOptions[0].style.backgroundColor = 'cornflowerblue'
        this.setState(() => ({
          menuIsOpen: true,
          height: '350px'
        }));
        // ^ This opens the menu and changes a state property.
      } else if (this.state.menuIsOpen === true) {
        // This does the opposite.
        h1.innerHTML = menuOptions[count].innerHTML;
        menuOptions[count].style.backgroundColor = '#a9c4f5'
        this.setState(() => ({
          menuIsOpen: false,
          height: '50px'
        }));
      }
    }
  })
}

问题根源 #

你遇到的现象大概率是事件监听器重复绑定导致的：每次组件挂载时componentDidMount都会添加一个新的keydown监听，如果组件因状态更新重复渲染、或卸载后再次挂载，就会存在多个监听器。按下Enter时，多个监听器依次执行，导致菜单状态被反复切换。

另外，直接操作DOM修改样式会和React的渲染逻辑冲突，也是潜在问题点。

解决方案 #

修改后的代码

componentDidMount() {
  // 将监听函数存为实例属性，方便后续移除
  this.handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      // 用函数式更新state，确保基于最新状态判断
      this.setState(prevState => {
        if (!prevState.menuIsOpen) {
          // 打开菜单：记录高亮选项，用状态控制样式
          return {
            menuIsOpen: true,
            height: '350px',
            activeOptionIndex: 0
          };
        } else {
          // 关闭菜单：记录选中的选项
          return {
            menuIsOpen: false,
            height: '50px',
            selectedOption: prevState.activeOptionIndex
          };
        }
      });
    }
  };
  window.addEventListener('keydown', this.handleKeyDown);
}

componentWillUnmount() {
  // 组件卸载时移除监听器，防止重复绑定和内存泄漏
  window.removeEventListener('keydown', this.handleKeyDown);
}

// 用状态驱动样式，避免直接操作DOM
render() {
  const { menuIsOpen, height, activeOptionIndex, selectedOption } = this.state;
  return (
    <div style={{ height }}>
      <h1>
        {selectedOption !== undefined ? menuOptions[selectedOption].innerHTML : '请选择选项'}
      </h1>
      {menuIsOpen && (
        <div className="menu-options">
          {menuOptions.map((option, index) => (
            <div
              key={index}
              style={{
                backgroundColor: index === activeOptionIndex ? 'cornflowerblue' : '#a9c4f5'
              }}
            >
              {option.innerHTML}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

关键改进点

• 函数式更新state：setState(prevState => { ... })确保每次状态切换都基于最新的状态值，避免React异步更新导致的判断偏差。
• 移除重复监听器：在componentWillUnmount中移除全局事件监听，彻底解决重复绑定问题。
• 状态驱动样式：不再直接操作DOM样式，而是通过state控制组件渲染时的样式，让React统一管理DOM，避免手动操作和渲染逻辑冲突。

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