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

标签 reactjs material-ui material-table

下面的 Material 表取自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)
            }),
        }}
      />
    )
  }
} ```

最佳答案

在您的 <MaterialTable /> 中组件,您应该替换 data像这样的 Prop :

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

文档中没有记录这一点。更多信息请点击:https://github.com/mbrn/material-table/issues/1900

关于reactjs - React Material Table - 添加行时的新字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59020501/

相关文章:

reactjs - 当我的数据在接下来的 13 年发生更改时,如何重新渲染?

reactjs - 在 Firebase 托管中将 Firebase 与 React 结合使用

javascript - Material UI GridTile 高度

javascript - 有没有办法更改 Material 表(reactjs)中的默认页面索引(0)

reactjs - react Material 表操作按钮标记覆盖多个操作

javascript - 从映射数组中获取元素

node.js - 为什么 Azure Web 服务无法使用 React 脚本启动?

CSS 变换和悬停时的框阴影

reactjs - 我无法将下一个 js 链接添加到 mui appbar

css - 如何样式化(添加 css)到 Material 表(React)?