Как создать вложенный объект на handleChange с помощью React?

Question

Добрый вечер, у меня есть функция onChange с именем handleChange для ряда динамически создаваемых входов. Он получает событие, а затем выполняет следующие действия:

const handleChange = (e) => {
  const updatedValues = [...values];
  updatedValues[e.target.dataset.id] = []
  updatedValues[e.target.dataset.id][e.target.name] = e.target.value;
  setValues(updatedValues);
}

Первая проблема, которую я здесь обнаружил, заключается в создании объекта со следующей структурой:

[
  {name: "some_name"}
], 
[
  {lastname: "some_lastname"}
], 
[
  {email: "some_data"}
], 
[
  {phone: "some_phone"}
]

Но структура, которую я хочу, выглядит так:

[
  { name: "some_name", lastname: "some_lastname", email: "some_email", phone: "some_phone"}
]

Следующее, что я хочу сделать, это сохранить компоненты NESTED в новом свойстве с именем nested. Я хочу, чтобы это было так:

[
  { name: "some_name", lastname: "some_lastname", email: "some_email", phone: "some_phone", nested: [
    { value: "some_value", value2: "some_value2", value3: "some_value3"}
  ]}
]

Вложенные файлы захватываются из поля ввода. Поле имеет className «вложенный» и находится на том же уровне, что и первые входы. Внутри у меня есть входы, которые я хочу вложить.

Не могли бы вы помочь мне с этим?

Answer 1

Используя карту объектов (то есть ассоциативный массив пар ключ-значение), вы можете записать обратный вызов handleChange как

const [values, setValues] = useState({}); // state is object

...

const handleChange = e => {
  const { dataset, name, value } = e.target;

  // Use a functional state update
  setValues(values => ({
    ...values,

    // update the correct dataset id
    [dataset.id]: {
      // shallow copy existing dataset values
      ...values[dataset.id],

      // if value is nested then update nested state value
      ...(dataset.nested
        ? {
            nested: {
              // shallow copy existing nested values
              ...values[dataset.id]?.nested,

              // update nested field value
              [name]: value
            }
          }
        : {
            // update unnested field value
            [name]: value
          })
    }
  }));
};

Вы можете заметить, что я добавил значение nested в набор данных. Это связано с тем, что может быть очень сложно отследить от объекта события onChange до содержащего его div с именем класса «вложенный», то есть между ними может быть любое количество элементов, например <label> и другие элементы макета. Поскольку вы говорите, что ваши поля ввода создаются динамически, очень легко просто добавить атрибут data-nested="nested"|""}.

<label>
  Name:
  <input
    data-id="test"
    data-nested=""
    name="name"
    type="text"
    onChange={handleChange}
  />
</label>

<div className="nested">
  <label>
    Nested Input 1
    <input
      data-id="test"
      data-nested="nested"
      name="value1"
      type="text"
      onChange={handleChange}
    />
  </label>
</div>

Изменить способ создания вложенного объекта при изменении ручки