Question

在下面的example资料表中，添加新行时如何使'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

反应物料表-添加行时的新字段

1 个答案: