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

Question

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

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 道具的一部分：< / p>

 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的链接！祝你好运！