使用dropdown的Material table触发编辑操作时无法编辑的问题

表单默认提交行为拦截 #

这是该场景下最高发的诱因：当Dropdown组件被包裹在<form>标签内时，Dropdown的交互触发元素默认类型为submit，触发onChange时会连带触发表单默认提交行为，导致页面重载。

• 修复方案：
  • 给外层form标签添加onSubmit回调，执行event.preventDefault()阻止默认提交
  • 给Material UI Dropdown/Select组件的触发元素显式设置type="button"，覆盖默认的submit属性
    代码示例：

  <form onSubmit={(e) => e.preventDefault()}>
    <Select
      value={currentVal}
      onChange={(e) => {
        e.preventDefault()
        // 你的数据更新逻辑
      }}
    >
      {/* 下拉选项 */}
    </Select>
  </form>
  

事件冒泡拦截 #

Dropdown的onChange事件向上冒泡到Material Table的编辑行内置回调，触发表格默认的行刷新/重渲染逻辑，也会导致编辑状态丢失。

• 修复方案：在Dropdown的onChange回调内调用event.stopPropagation()阻止事件向上传递
  代码示例：

  <Dropdown
    onChange={(e, newVal) => {
      e.stopPropagation()
      // 执行编辑数据更新逻辑
    }}
  />
  

行key值校验 #

如果Material Table行的key属性绑定了会随Dropdown值变化的字段，值更新后key变化会触发整行卸载重渲染，看起来和页面重载效果一致。

• 修复方案：使用行数据唯一且不可变的字段（如数据ID）作为行key，禁止使用索引、可编辑字段作为key值。

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