javascript - 材料表可编辑：使所有行一次可编辑

Question

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

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组件，例如添加一个在您退出时保存行的功能。恐怕目前没有其他方法可以合并此类功能。