AG Grid React如何阻止按下回车键触发单元格退出编辑状态

普通的e.preventDefault()不生效是因为你大概率监听的是全局/普通DOM层级的键盘事件，AG Grid内部的编辑事件优先级更高，会先处理默认逻辑，你拿到事件的时候默认行为已经执行了。可以用以下两种方案解决：

• 方案1：使用AG Grid官方暴露的onCellKeyDown事件（推荐，改造成本最低）
  该事件会在AG Grid内部处理键盘逻辑前触发，可以直接拦截默认行为，示例配置如下：

  const gridOptions = {
    // 其余grid配置保持不变
    onCellKeyDown: (params) => {
      // 仅匹配编辑状态下的回车事件
      if (params.event.key === 'Enter' && params.cellEditor) {
        params.event.preventDefault();
        params.event.stopPropagation();
        // 此处插入你的自定义逻辑
        console.log('执行自定义回车操作，当前单元格值：', params.value);
        // 无需额外代码，拦截后就不会自动退出编辑模式
      }
    }
  }
  

  如果你使用的是框架封装的AG Grid（React/Vue/Angular），对应绑定onCellKeyDown/@cell-key-down等属性即可，逻辑和上面完全一致。
• 方案2：自定义单元格编辑器覆盖回车逻辑
  如果方案1不满足你的定制需求，可以直接重写单元格编辑器，在编辑器输入元素上直接绑定键盘事件：

  // 自定义文本编辑器示例
  class CustomEditEditor {
    init(params) {
      this.input = document.createElement('input');
      this.input.value = params.value;
      // 直接在编辑器输入框上拦截回车
      this.input.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
          e.preventDefault();
          e.stopImmediatePropagation();
          // 自定义逻辑
          console.log('自定义回车逻辑执行');
        }
      })
    }
    getGui() {
      return this.input;
    }
    getValue() {
      return this.input.value;
    }
    // 其余编辑器生命周期方法按需实现即可
  }
  
  // 列定义中绑定自定义编辑器
  const columnDefs = [
    {
      field: 'targetField',
      cellEditor: CustomEditEditor
    }
  ]
  

注意事项 #

• 不要直接监听全局的keydown事件做拦截，此时AG Grid内部逻辑已经执行完毕，无法阻止退出编辑
• 拦截时可以增加stopImmediatePropagation()调用，避免同元素上其他绑定的回调触发影响效果

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