材料表选择菜单是否连接到每一行？

Question

我的材料表有一个选择菜单作为列之一，但是当我选择其中一个选项时，它会为所有行更改它。如何使更改行具体化，使它们不相互连接？我意识到 event.target.value 方法适用于所有映射的选择菜单，我不知道如何使其特定于一个。

有问题的行是设施列

const selectData = ["One", "Two", "Three"];
function Table() {
  const columns = [
    {
      title: "Avatar",
      render: (rowData) => (
        <Avatar
          maxInitials={1}
          size={40}
          round={true}
          name={rowData === undefined ? " " : rowData.first_name}
        />
      ),
    },
    { title: "ID", field: "_id", hidden: true },
    { title: "Name", field: "name" },
    { title: "Email", field: "email" },
    { title: "Company", field: "companyID" },
    { title: "Role", field: "role" },
    {
      title: "Facility",
      render: (rowData) => (
        <FormControl>
          <InputLabel id="demo-mutiple-checkbox-label">Tags</InputLabel>
          <Select
            labelId="demo-mutiple-checkbox-label"
            id="demo-mutiple-checkbox"
            multiple
            value={items}
            onChange={handleChange}
            input={<Input />}
            renderValue={(selected) => selected.join(", ")}
            MenuProps={MenuProps}
          >
            {selectData.map((item) => (
              <MenuItem key={item} value={item}>
                <Checkbox checked={items.indexOf(item) > -1} />
                <ListItemText primary={item} />
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      ),
    },
    { title: "Password", field: "password" },
  ];
  const [data, setData] = useState([]);

  const [items, setItems] = useState([]); //table data

  const handleChange = (event) => {
    setItems(event.target.value);
  };




return (
    <div>
      <MaterialTable
        title="Users"
        columns={columns}
        data={data}
        icons={tableIcons}
        editable={{
          onRowUpdate: (newData, oldData) =>
            new Promise((resolve) => {
              handleRowUpdate(newData, oldData, resolve);
            }),
          onRowAdd: (newData) =>
            new Promise((resolve) => {
              handleRowAdd(newData, resolve);
            }),
          onRowDelete: (oldData) =>
            new Promise((resolve) => {
              handleRowDelete(oldData, resolve);
            }),
        }}
      />
    </div>
  );
}

Answer 1

我认为您应该在 Facility 列中定义一个editComponent，这样您就可以修改当前rowData 的值，而不仅仅是items 变量，它是在select 组件中设置为value，因此显示在每一行中。

这是一个例子：

 const tableColumns = [
    { title: "Client", field: "id" },
    { title: "Name", field: "name" },

    {
      title: "Choose a Fruit",
      field: "fruit",
      editComponent: ({ value, onChange }) => (
        <select onChange={(e) => onChange(e.target.value)}>
          <option selected value={value}>
            {value}
          </option>
          {fruitsList.map(
            (item) =>
              item !== value && (
                <option key={item} value={item}>
                  {item}
                </option>
              )
          )}
        </select>
      )
    }
  ];

希望对你有用！完整代码和沙盒here。