React Material Table - 添加行时的新字段

Question

在下面取自example的Material Table中，添加新行时如何使'ahiddenfield'出现？我不太确定在即将添加新行时（在 onRowAdd 之前）如何访问状态。可以不那么头疼吗？

  constructor(props) {
    super(props);
    this.state = {
      columns: [
        { title: 'Name', field: 'name' },
        { title: 'Hidden Field', field: 'hiddenfield', hidden: true }
      ],
      data: [
        { name: 'Mehmet' },
        { name: 'Zerya Betül'},
      ]
    }
  }

  render() {
    return (
      <MaterialTable
        title="Editable Preview"
        columns={this.state.columns}
        data={this.state.data}
        editable={{
          onRowAdd: newData =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                {
                  const data = this.state.data;
                  data.push(newData);
                  this.setState({ data }, () => resolve());
                }
                resolve()
              }, 1000)
            }),
          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)
            }),
          onRowDelete: oldData =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                {
                  let data = this.state.data;
                  const index = data.indexOf(oldData);
                  data.splice(index, 1);
                  this.setState({ data }, () => resolve());
                }
                resolve()
              }, 1000)
            }),
        }}
      />
    )
  }
} ```

Answer 1

在您的 <MaterialTable /> 组件中，您应该像这样替换 data 道具：

data={Array.from(this.state.data)}.

这在文档中没有记录。更多信息在这里：https://github.com/mbrn/material-table/issues/1900

React Material Table - 添加行时的新字段

React Material Table - New field when add row

reactjs

material-ui

material-table