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

【问题标题】：How can I use checkbox in the MaterialTable ? (react)如何在 MaterialTable 中使用复选框？（反应）
【发布时间】：2020-11-02 12:09:15
【问题描述】：

我在反应中创建了一个材料表，我想使用其中的复选框。我该怎么做？

【问题讨论】：

标签： reactjs material-ui material-table

【解决方案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 属性的一部分：

 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);
        })
    }}

这里是工作 sandbox 的链接！祝你好运！

【讨论】：