javascript - Material 表可编辑 : Making all rows editable at once

Question

我有一个包含多行的表格，我希望能够同时将它们全部设为可编辑。使用可编辑标签，我已经能够进入编辑模式并一次使一行可编辑，但如果我从一行切换到下一行，它不会保存更改。我需要停下来点击一个按钮来保存更改。我希望能够在点击保存按钮之前对整个表格进行更改。有没有办法用 Material 表做到这一点？

class Editable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname', initialEditValue: 'initial edit value' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
        {
          title: 'Birth Place',
          field: 'birthCity',
          lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
        },
      ],
      data: [
        { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
      ]
    }
  }

  render() {
    return (
      <MaterialTable
        title="Editable Preview"
        columns={this.state.columns}
        data={this.state.data}
        editable={{
          onRowUpdate: (newData, oldData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                {
                  const data = this.state.data;
                  const index = data.indexOf(oldData);
                  data[index] = newData;
                  this.setState({ data }, () => resolve());
                }
                resolve()
              }, 1000)
            }),
        }}
      />
    )
  }
}

Answer 1

您始终可以选择覆盖 EditRow 组件，例如添加在您跳出行时保存该行的功能。恐怕目前没有其他方法可以合并此类功能。