如何使用 React 在 handleChange 上构建嵌套对象？答案

【问题标题】：How to build a nested object on handleChange with React?如何使用 React 在 handleChange 上构建嵌套对象？
【发布时间】：2020-08-01 01:32:18
【问题描述】：

晚上好，对于一些动态创建的输入，我有一个 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 为“nested”，它与第一个输入处于同一级别。在其中我有我想要嵌套的输入。

你能帮我解决这个问题吗？

【问题讨论】：

标签： javascript json reactjs object nested

【解决方案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 事件对象到类名为“nested”的包含 div 的跟踪可能非常困难，即它们之间可能有任何个元素，例如 @987654327 @ 和其他布局元素。由于您说您的输入字段是动态创建的，因此只需添加 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>

【讨论】：