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

IT技术 javascript json reactjs object nested
2021-05-17 08:50:21

晚上好，我有一个 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 为“嵌套”，并且与第一个输入处于同一级别。在它里面我有我想要嵌套的输入。

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

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>

编辑如何在 handlechange 上构建嵌套对象

其它你可能感兴趣的问题
上一篇browserHistory.push 在react中不起作用 下一篇映射对象数组以在 ReactJS 中创建表