在React MaterialTable上,当启用option.selection行时编码编辑按钮的示例?

问题描述 投票:0回答:1

我正在使用带有选项的React MaterialTable组件。选择:正确。当我选择一个或多个行时,将在顶部/右侧的“编辑”按钮上启用它。我如何编码此按钮?我应该使用女巫动作/选项吗?

产品编号:

      <MaterialTable
                  icons={tableIcons}
                  title="Table"
                  columns={this.getColumns()}
                  data={this.props.data}
                  options={{
                      filtering: true,
                      selection: true
                  }}

                  editable={{

                    onRowUpdate: (newData, oldData) =>
                      new Promise((resolve, reject) => {

                        console.log('OnRowUpdate');

                        setTimeout(() => {
                          {
                              this.props.setdata(newData);


                          }
                          resolve();
                        }, 1000);
                      }),
                  }}

            />

enter image description here

reactjs
1个回答
0
投票

您的解决方案在this link中的物料页面中>

这是页面编码的代码

<MaterialTable
  title="Editable Example"
  columns={state.columns}
  data={state.data}
  editable={{
    onRowAdd: newData =>
      new Promise(resolve => {
        setTimeout(() => {
          resolve();
          const data = [...state.data];
          data.push(newData);
          setState({ ...state, data });
        }, 600);
      }),
    onRowUpdate: (newData, oldData) =>
      new Promise(resolve => {
        setTimeout(() => {
          resolve();
          const data = [...state.data];
          data[data.indexOf(oldData)] = newData;
          setState({ ...state, data });
        }, 600);
      }),
    onRowDelete: oldData =>
      new Promise(resolve => {
        setTimeout(() => {
          resolve();
          const data = [...state.data];
          data.splice(data.indexOf(oldData), 1);
          setState({ ...state, data });
        }, 600);
      }),
  }}
/>

我的代码笔中有一些东西,也许会帮到您my codepen

© www.soinside.com 2019 - 2024. All rights reserved.