在 DataGrid MUI 中使用 Select 组件

Question

我使用 DataGrid MUI 库创建了一个表，并想为特定列的所有单元格添加一个选择组件

到目前为止我做了什么

我创建了一个 Select 组件并将其传递给renderCell中的 renderCell

我的组件使用useState因为我希望它是可编辑的

随后，对于每个单元格，都有一个useState ，这使得表格很重，有什么改进的想法吗？

我的代码

const Payment = (params) => {
    const [paymentStatus, setPaymentStatus] = useState(params.value);
    const id = params.id;

    return (
      <Select
        value={paymentStatus}
        onChange={(e) => {
          setPaymentStatus(e.target.value);
          return updateSubscription(id, e.target.value); // function to update the payment
        }}
      >
        <MenuItem value={"paid"}>Paid</MenuItem>
        <MenuItem value={"unpaid"}>Un Paid</MenuItem>
      </Select>
    );
  };

  const columns = [
...
    {
      field: "payment_status",
      headerName: "Payment Status",
      renderCell: (params) => <Payment params={params} />,
    }
  ];

Answer 1

我推荐使用singleSelect Column 类型。

const paymentOptions = [
    { value: "paid", label: "Paid" },
    { value: "unpaid", label: "Un Paid" },
];

...
const columns = [
    ...
    {
        field: "payment_status",
        headerName: "Payment Status",
        type: 'singleSelect',
        valueOptions: paymentOptions,
        valueFormatter: ({ id, value, field }) => {
            const option = paymentOptions.find(
                ({ value: optionValue }) => optionValue === value
            );

            return option!.label;
        },
    }
];