React中绑定document的键盘事件触发多个列表实例响应如何解决

核心问题原因 #

你将键盘事件统一绑定到了document全局对象上，页面上所有FilterableScrollList组件实例的按键回调都会被触发，自然会出现多列表同时响应的问题。

可落地实现方案 #

• 方案1：给组件增加激活状态判断，仅当前聚焦的列表处理按键事件
  1. 给组件新增isActive状态，标记当前列表是否处于用户选中状态
  2. 给列表外层容器添加tabIndex={0}属性，让容器可接收聚焦事件，同时绑定onFocus/onBlur事件修改isActive状态
  3. 在handleArrowKey逻辑最前面加判断，如果isActive为false直接终止逻辑执行
     改造后代码示例：

  class FilterableScrollList extends React.Component {
    state = {
      index: 0,
      isActive: false
    }
    componentDidMount() {
      document.addEventListener("keydown", this.handleArrowKey);
    }
    handleArrowKey = (e) => {
      // 非激活状态直接不处理
      if (!this.state.isActive) return
      // 原有上下键处理逻辑
      if (e.key === 'ArrowDown') {
        this.setState(prev => ({index: prev.index + 1}))
      } else if (e.key === 'ArrowUp') {
        this.setState(prev => ({index: prev.index - 1}))
      }
    }
    render() {
      return (
        <div 
          tabIndex={0}
          onFocus={() => this.setState({isActive: true})}
          onBlur={() => this.setState({isActive: false})}
          className="list-container"
        >
          {/* 原有列表渲染逻辑 */}
        </div>
      )
    }
    componentWillUnmount() {
      // 卸载时解绑事件，避免内存泄漏
      document.removeEventListener("keydown", this.handleArrowKey)
    }
  }
  

  补充：如果不需要默认的聚焦外边框，可给外层容器加CSS样式.list-container:focus { outline: none; }隐藏样式即可，不影响功能。
• 方案2：事件绑定改为绑定到列表自身容器，无需全局监听
  不需要绑定document事件，直接把onKeyDown事件绑到上述的外层容器上，只有容器处于聚焦状态时才会触发按键回调，天然不会影响其他列表，代码更简洁。
• 方案3：嵌套子列表场景补充优化
  如果存在父子嵌套列表，在子列表的按键处理逻辑最前面调用e.stopPropagation()，阻止事件冒泡到父列表，避免父子列表同时响应同一个按键。

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