React mui4 как при выборе данных в одной строке изменить данные строки

Question

это колонка, где я выбираю номенклатуру

{
      name: "id",
      header: "Наименование",
      minWidth: 200,
      defaultFlex: 1,
      showColumnMenuTool: false,
      headerAlign: "start",
      textAlign: "end",
      renderEditor: (editorProps) => {
        return <SelectEditor {...editorProps} nativeScroll={true} />;
      },
      editorProps: {
        idProperty: "id",
        dataSource: unsent
          .map((elem) => ({
            id: elem.id,
            label: elem.isManufactured
              ? `[${elem.serialNumber}] ${elem.nomenclature}`
              : elem.nomenclature,
              
          })),
        listEmptyText: "Нет доступных товаров в заказе",
        placeholder: "Укажите товар из списка",
        listStyle: { color: "blue" },
      },
      cellDOMProps,
      render: ({ value, data }) =>
        FindLabel(
          value,
          unsent
            .map((elem) => ({
              id: elem.id,
              label: elem.isManufactured
                ? `[${elem.serialNumber}] ${elem.nomenclature}`
                : elem.nomenclature,
            }))
        ),
    },

и есть колонка со складом

{
      name: "storageShipment",
      header: "Склад отгрузки",
      minWidth: 200,
      defaultFlex: 1,
      showColumnMenuTool: false,
      headerAlign: "start",
      textAlign: "end",
      renderEditor: (editorProps, { data }) => {
        return (
          <SelectEditor
            {...editorProps}
            nativeScroll={true}
            editorProps={{
              idProperty: "id",
              dataSource:
                data.nomenclatureShipment !== null
                  ? stores
                    .filter((value) => ((data.isManufactured && value.id == data.productId)
                      || (!data.isManufactured && value.nomenclatureId === data.nomenclatureShipment)) && value.countAvailable !== 0)
                    .map((elem) => ({ id: elem.storageId, label: elem.storage + " (" + elem.countAvailable + ")" }))
                  : [],
              listEmptyText: data.nomenclatureShipment === null ? "Не выбран товар для отгрузки" : "Товара нет на складе",
              placeholder: "Укажите склад из списка",
              listStyle: { color: "blue" },
            }}
          />
        );
      },
      cellDOMProps,
      render: ({ value, data }) =>
        FindLabel(
          value,
          stores.map((elem) => ({ id: elem.storageId, label: elem.storage }))
        ),
    },

в наименование я помещаю список unsent

var normalData = arr.map((elem, index) =>
    Object.assign(elem, {
      id: index+1,
      index: index + 1,
      article: elem.nomenclature.article,
      nomenclature: elem.nomenclature.nameNomenclature,
      nomenclatureId: elem.nomenclature.id,
      isManufactured: elem.nomenclature.isManufactured,
      serialNumber: elem.product?.serialNumber,
      productId: elem.product?.id,
      category: elem.nomenclature.category ? elem.nomenclature.category.nameCategory : "Не указано",
      unit: elem.nomenclature.unit ? elem.nomenclature.unit.nameUnit : "Не указано",
      customerId: elem.customer.id,
      customer: elem.customer.name,
    })
  );

когда я выбираю наименование мне бы хотелось присваивать data.nomenclatureShipment, я могу получить эти данные из unsent. но я не понимаю как это сделать, можно через onChange но я не понимаю как изменить данные текущей строки

Answer 1

Чтобы изменить данные строки при выборе номенклатуры, можно использовать onChange для вызова функции, которая обновляет соответствующую строку данных. В твоем случа нужно обновить nomenclatureShipment на основе выбранного значения.

renderEditor: (editorProps) => {
  return (
    <SelectEditor
      {...editorProps}
      nativeScroll={true}
      onChange={(value) => handleNomenclatureChange(value, editorProps.data)}
    />
  );
},

const handleNomenclatureChange = (selectedId, rowData) => {
  const updatedUnsentItem = unsent.find((item) => item.id === selectedId);
  if (updatedUnsentItem) {
    // Обновляем значение nomenclatureShipment в текущей строке
    const updatedRow = {
      ...rowData,
      nomenclatureShipment: updatedUnsentItem.nomenclatureShipment,
    };

    // Обновляем данные таблицы
    const updatedData = tableData.map((item) =>
      item.id === rowData.id ? updatedRow : item
    );
    setTableData(updatedData);
  }
};

onChange вызывается при выборе номенклатуры, и функция handleNomenclatureChange получает выбранное значение и данные строки.
Внутри handleNomenclatureChange ты ищешь соответствующий элемент в массиве unsent, чтобы получить нужные данные для обновления строки.
После этого создается обновленная версия строки и обновляются данные таблицы с помощью setTableData.

БЛОГ НА HUSL

React mui4 как при выборе данных в одной строке изменить данные строки

Ответы (1 шт):