Блог

В моей таблице материалов в качестве одного из столбцов есть меню выбора, однако, когда я выбираю один из параметров, он изменяет его для всех строк. Как я могу сделать строку изменения конкретной, чтобы они не были связаны друг с другом? Я понимаю, что подход 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>
  );
}
 

Я думаю, что вы должны определить столбец editComponent в объекте, сделав это, вы сможете изменить значение текущей rowData , а не только items переменной, которая устанавливается как value в select компоненте и, следовательно, отображается в каждой строке.

Вот пример:

  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 amp;amp; (
                <option key={item} value={item}>
                  {item}
                </option>
              )
          )}
        </select>
      )
    }
  ];
 

Надеюсь, это сработает для вас! Полный код и песочница здесь.