如何获取输入框值并更新数据库？React代码求助

核心问题 #

1. 输入框未绑定响应式状态：当前输入框的value直接取自原始数据源result[col[index]]，而非React状态值，导致输入时界面无法实时更新，也无法通过状态获取最新输入内容。
2. 状态管理逻辑混乱：所有输入框共用同一个setUnitPrice方法，无法区分不同行、不同字段的修改，无法完整保存整行的编辑数据。

具体修复步骤 #

1. 新增编辑状态与临时数据存储

在组件中添加两个状态，用于存储编辑中的临时数据和原始备份：

// 存储当前编辑行的临时修改数据
const [editRowData, setEditRowData] = useState({});
// 保存编辑前的原始行数据，用于取消编辑时恢复
const [originalRowData, setOriginalRowData] = useState({});

2. 调整编辑按钮的点击逻辑

点击编辑时，复制目标行数据到临时状态，同时保留原始数据备份：

const onEdit = (serialNo) => {
  // 定位到要编辑的行数据
  const targetRow = list.find(item => item.SERIAL_NO === serialNo);
  setEditRowData({...targetRow});
  setOriginalRowData({...targetRow});
  // 保留原有开启编辑模式的逻辑（比如设置inEditMode）
};

3. 修改输入框的绑定规则

将输入框的value绑定到editRowData的对应字段，onChange时实时更新临时状态：

{col.map((val, index) => {
  return (
    inEditMode.status && inEditMode.rowKey === result.SERIAL_NO ? (
      <TableCell key={index}>
        <input 
          type="text" 
          value={editRowData[val] || ''} 
          onChange={(event) => {
            setEditRowData(prev => ({
              ...prev,
              [val]: event.target.value
            }));
          }}
        />
      </TableCell>
    ) : (
      <TableCell key={index}>
        {result[val]}
      </TableCell>
    )
  );
})}

4. 完善保存与取消逻辑

• 保存操作：将临时编辑数据同步回数据源，提交到数据库后关闭编辑模式

const onSave = () => {
  // 1. 更新数据源中的对应行数据
  const genericKey = Object.keys(genericStep2ResultList)[1];
  const updatedList = genericStep2ResultList[genericKey].map(item => {
    if (item.SERIAL_NO === editRowData.SERIAL_NO) {
      return editRowData;
    }
    return item;
  });
  // 假设genericStep2ResultList是组件状态，用setter更新
  setGenericStep2ResultList(prev => ({
    ...prev,
    [genericKey]: updatedList
  }));
  
  // 2. 调用接口提交最新数据到数据库
  // updateDatabase(editRowData);
  
  // 3. 关闭编辑模式
  onCancel();
};

• 取消操作：清空临时数据，恢复原始状态并关闭编辑模式

const onCancel = () => {
  setEditRowData({});
  setOriginalRowData({});
  // 保留原有关闭编辑模式的逻辑
};

5. 关键注意点

• 确保genericStep2ResultList是通过useState或状态管理工具维护的响应式状态，否则更新后界面无法重新渲染。
• 如果genericStep2ResultList是从父组件传入，需要通过父组件提供的回调函数同步更新数据。

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