Question

我有一个列表，以页面格式显示在页面上。我计划让用户能够编辑列表中的任何项目，因此我将在此表中显示每个单元格，如下所示：

<TableCell>
     <TextField id="standard-bare" defaultValue={items.data[i].firm} margin="normal" />
</TableCell>

然后我在每行中一直有下面的图标

<IconButton onClick={() => this.UserEdit(items.data[i])}>
     <Check color="action" />
</IconButton>

因此，当用户单击上方的对勾标记时，将启动下面的功能。

UserEdit(id) {
    console.log(id);
}

因此，理想情况下，我需要获取这些字段的所有新值，以便我可以运行API调用以使用该信息更新数据库。现在，每次单击检查时，我都会得到旧值（这些字段在首次加载时具有的值）。如何获得新值？

Answer 1

要跟踪新值/更新值，可以考虑采用以下方法：

1）引入rowsChanges状态并将其设置为空以跟踪表组件中的新值/更新值

2）修改文本字段中的值后，将其值以及字段名称和行索引保存为rowsChanges状态：

handleTextFieldChange(rowIndex,change) {
    this.setState(prevState => ({
      rowsChanges: {
        ...prevState.rowsChanges,
        [rowIndex]: {...prevState.rowsChanges[rowIndex],[change.fieldName]: change.fieldValue}
      }
    }));
  }

其中

<EditableTableCell
      row={row}
      fieldName="name"
      onCellValueChange={this.handleTextFieldChange.bind(this,index)}
/>

其中EditableTableCell是一个自定义组件，用于在发生更改事件时从TextField中提取字段值：

const EditableTableCell = ({ row, fieldName, onCellValueChange }) => {
  const handleTextFieldChange = e => {
    onCellValueChange({
      fieldValue: e.target.value,
      fieldName: fieldName
    });
  };

  return (
    <TableCell>
      <TextField
        onChange={handleTextFieldChange}
        id={fieldName}
        defaultValue={row[fieldName]}
        margin="normal"
      />
    </TableCell>
  );
};

3），最后，单击“保存”按钮，将更改保存到db：

handleSave(rowIndex) {
    const rowChanges = this.state.rowsChanges[rowIndex];
    console.log("Save row changes into db...")
    //clear row changes...
    this.setState(prevState => ({
      rowsChanges: {
        ...prevState.rowsChanges,
        [rowIndex]: {}
      }
    }));
}

这是 a demo （Simple Table example的叉子）

Answer 2

您可以以状态存储数据并更新组件的状态，然后使用状态将数据发送到服务器。您可以存储数据数组并根据id更改状态的数据。

一种方法是显示一个编辑表单，该表单将具有用于更新数据的文本字段。例如

class MyComponent extends React.Component {
state = {
data: ['data1', 'data2'] etc
}
// onChange method call on the field change of edit modal
handleChange(event, id) {
  const { data } = this.state;
  data[id] = event.target.value;
  this.setState({data})
}
// in render method. i will be from loop
<input value={this.state.data[i]} onChange={(e) => this.handleChange(e, id)}

您还可以在表字段上使用onChange方法

在表React Material UI中更新数据

2 个答案: