如何从 React 中的数据创建对象?

Question

给定以下代码，如何在 React 状态(对于函数组件(中创建对象模型？

<div class="form-row">
<label>Input 1</label>
<input id="1" />
</div>
<div class="form-row">
<label>Input 2</label>
<input id="2" />
</div>
<div class="form-row">
<label>Input 3</label>
<input id="3" />
</div>
<div class="form-row">
<label>Input 4</label>
<input id="4" />
</div>

const dataToPost = [
...document.querySelectorAll("div.form-row"),
].map((f) => {
let obj = {};
f.querySelectorAll("input").forEach(
(item) => (
(obj["id"] = item.id), (obj["value"] = item.value || "")
)
);
return obj;
});

这输出了我想要的结果...

"dataToPost": [
{
"id": "1",
"value": "input one value"
},
{
"id": "2",
"value": "input two value"
},
{
"id": "3",
"value": "input three value"
},
{
"id": "4",
"value": "input four value"
}
]

那么，是否可以为每个输入使用 on change 事件来更新其状态对象，因为它需要是一个函数组件？

Answer 1

您需要创建自定义挂钩以保持表单的状态为所需的格式，并更新onChange事件的表单状态

请按照以下步骤操作：

1. 转换

   <div class="form-row">
   <label>Input 1</label>
   <input id="1" />
   </div>
   

   in 将表示单个输入元素及其标签的组件。

2. 创建一个自定义挂钩，以保持表单的状态

   import { useState, useCallback } from "react";
   function useForm() {
   const [data, setData] = useState([
   { id: 1, value: "" },
   { id: 2, value: "" },
   { id: 3, value: "" },
   { id: 4, value: "" }
   ]);
   const updateForm = useCallback(
   ({ target }) => {
   const arr = [...data];
   const obj = arr.find(o => o.id === Number(target.name));
   obj.value = target.value;
   setData(arr);
   },
   []
   );
   return [data, updateForm];
   }
   export default useForm;
   

3. 创建一个将呈现所有Input组件的Form组件。此Form组件将使用在步骤 2 中创建的useForm挂钩。在此组件中，我们将遍历表单状态并呈现各个Input组件，并将适当的 props 传递给Input元素，并传递onChange事件处理程序，该处理程序将在任何输入更改时更新表单状态。

   import React from "react";
   import useForm from "./useForm";
   import Input from './Input';
   function Form() {
   const [data, setData] = useForm();
   return (
   <>
   {
   data.map((input, idx) => (
   <Input
   key={idx}
   type="text"
   value={input.value}
   label={`Input ${++idx}`}
   name={input.id}
   setValue={setData}
   />
   ))
   }
   </>
   );
   }
   export default Form;
   

这是上述步骤的工作演示。

附言useCallback钩子和React.memo已用于优化。这可以防止在任何Input组件上触发onChange事件时不必要地重新呈现所有Input组件