material-table集成AutoComplete时选中值消失、编辑行异常退出问题咨询

问题修复方案 #

问题1：点击/按Tab进入Autocomplete字段时选中值消失

根因：

1. 值类型不匹配：Autocomplete的options是包含tItemName、tNodeKey的完整对象，但你绑定的value={props.value}对应的dropDown字段仅存了字符串类型的tItemName，类型不匹配导致Autocomplete无法识别选中值
2. 错误绑定inputValue：Autocomplete的inputValue是输入框显示的文本，和组件选中值value是两个独立属性，不能直接绑定同一个值
3. 冗余的defaultValue：受控模式下Autocomplete已经接管输入框值，TextField设置的defaultValue不会生效，反而可能导致值冲突

修复步骤：

1. 初始化mappingRows时给dropDown字段存完整的选项对象，而非仅字符串：

// 数据库获取数据逻辑修改
axios.post(`/mapping/get/rows`)
.then(res => {
  const rowData = res.data.map(item => {
    const rowobj = {};
    rowobj.tItemName = item.target_data_item_name;
    rowobj.tNodeKey = item.target_data_item_name + "^" + item.node_key;
    // dropDown存完整对象，和options结构对齐
    rowobj.dropDown = {
      tItemName: item.target_data_item_name,
      tNodeKey: item.node_key
    };
    return rowobj;
  })
  setMappingRows(rowData);
})

2. 删除Autocomplete上的inputValue={props.value}绑定，删除TextField的defaultValue={props.rowData.tItemName}配置
3. 修正disableCloseOnSelect的传值，布尔值不要加引号：disableCloseOnSelect={true}

问题2：选中选项后直接退出编辑状态

根因：

1. 直接修改状态引用：你在onChange里直接修改mappingRows数组的元素属性，没有通过setMappingRows更新状态，属于直接变异状态，会导致表格意外重绘丢失编辑状态
2. 未调用editComponent提供的props.onChange：material-table的自定义编辑组件要求你通过props.onChange将选中值回传给表格内部状态，而非自己直接修改数据源，表格会在用户点击确认编辑按钮后才更新最终数据源

修复步骤：

1. 删除Autocomplete onChange里所有直接修改mappingRows数组的代码，以及setSelectedTarget调用，替换为调用props.onChange回传新值：

onChange={(event, newValue) => {
  // 直接调用表格提供的onChange回传新值
  props.onChange(newValue);
}}

2. 配置material-table的editable属性，在onRowUpdate回调中统一处理数据源更新：

<MaterialTable
  title="Data Item Level Mappings"
  columns={itemMapTitles.columns}
  data={mappingRows}
  icons={IconSet}
  tableRef={tableRef}
  // 新增editable配置
  editable={{
    onRowUpdate: (newData, oldData) =>
      new Promise((resolve, reject) => {
        // 在这里统一更新mappingRows
        const dataUpdate = [...mappingRows];
        const index = oldData.tableData.id;
        // 同步更新其他字段
        if (newData.dropDown) {
          newData.tItemName = newData.dropDown.tItemName;
          newData.tNodeKey = newData.dropDown.tItemName + "^" + newData.dropDown.tNodeKey;
        } else {
          newData.tItemName = null;
          newData.tNodeKey = null;
        }
        dataUpdate[index] = newData;
        setMappingRows([...dataUpdate]);
        // 需要同步到后端可在这里加接口调用
        resolve();
      })
  }}
/>

可选优化 #

如果需要保留选中后下拉框不关闭的效果，除了修正disableCloseOnSelect的传值，还可以添加onClose回调阻止默认关闭逻辑，或者根据业务场景手动控制open状态。

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