如何在 MaterialTable 中使用复选框？ （反应）

Question

我在 React 中创建了一个 material-table，我想使用其中的复选框。 我该怎么做？

Answer 1

我按照官方docs做了这个例子：

要使其正常工作，您需要在列定义中指定 editComponent 和 render 属性：

{
  title: "booleanValue",
  field: "booleanValue",
  editComponent: (props) => {
    return (
      <input
        type="checkbox"
        checked={props.value}
        onChange={(e) => props.onChange(e.target.checked)}
      />
    );
  },
  render: (rowdata) => (
    <input type="checkbox" checked={rowdata.booleanValue} />
  )
}

您还必须定义 onRowAdd、onRowUpdate 和 onRowDelete 函数作为可编辑道具：

 editable={{
      onRowAdd: (newData) =>
        new Promise((resolve, reject) => {
          setTimeout(() => {
            setData([...data, newData]);

            resolve();
          }, 1000);
        }),
      onRowUpdate: (newData, oldData) =>
        new Promise((resolve, reject) => {
          setTimeout(() => {
            console.log(oldData);
            const dataUpdate = [...data];
            const index = oldData.tableData.id;
            dataUpdate[index] = newData;
            setData([...dataUpdate]);

            resolve();
          }, 1000);
        }),
      onRowDelete: (oldData) =>
        new Promise((resolve, reject) => {
          setTimeout(() => {
            const dataDelete = [...data];
            const index = oldData.tableData.id;
            dataDelete.splice(index, 1);
            setData([...dataDelete]);

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

这里是 link 工作 sandbox！祝你好运！