React Function Component：状态对象模型创建及输入onChange事件更新方案

嘿，我来一步步帮你解决这些React相关的问题，结合你给出的代码场景来拆解：

1. 如何在React中从数据创建对象？ #

在React里从数据生成对象的逻辑和原生JavaScript很相似，但我们通常会结合组件的**状态（state）**来操作，避免直接操作DOM（这也是React的核心思想之一）。比如你提供的原生JS代码是通过遍历DOM元素生成对象数组，在React中我们会基于状态数据来生成对应的对象结构，或者把DOM输入的内容同步到状态对象里。

2. 在React Function Component的state中创建对应的对象模型 #

我们可以使用React的useState钩子来初始化一个符合需求的状态数组，每个元素是包含id和value的对象，对应你的4个输入框：

import { useState } from 'react';

function MyForm() {
  // 初始化状态，对应4个输入框的初始对象
  const [formData, setFormData] = useState([
    { id: '1', value: '' },
    { id: '2', value: '' },
    { id: '3', value: '' },
    { id: '4', value: '' },
  ]);

  // 后续添加事件处理逻辑
}

3. 为每个输入框绑定onChange事件更新对应状态对象 #

当然可以！这是React中处理表单输入的标准做法，我们可以写一个复用的事件处理函数，实时更新对应输入框的状态值，实现受控组件的效果：

完整代码示例 #

import { useState } from 'react';

function MyForm() {
  const [formData, setFormData] = useState([
    { id: '1', value: '' },
    { id: '2', value: '' },
    { id: '3', value: '' },
    { id: '4', value: '' },
  ]);

  // 处理输入框变化的函数
  const handleInputChange = (e) => {
    const { id, value } = e.target;
    // 基于当前状态更新对应id的对象值
    setFormData(prevFormData => 
      prevFormData.map(item => 
        // 找到匹配id的项，更新value；其他项保持不变
        item.id === id ? { ...item, value } : item
      )
    );
  };

  return (
    <div>
      {/* 遍历状态数组渲染输入框 */}
      {formData.map(item => (
        <div key={item.id} className="form-row">
          <label>Input {item.id}</label>
          <input
            id={item.id}
            value={item.value}
            onChange={handleInputChange}
          />
        </div>
      ))}

      {/* 可选：添加按钮查看当前状态结构 */}
      <button onClick={() => console.log('当前表单数据:', formData)}>
        查看表单数据
      </button>
    </div>
  );
}

export default MyForm;

关键说明 #

• 我们用map遍历状态数组渲染输入框，保证了数据与UI的一致性，输入框的展示完全由formData状态控制。
• handleInputChange函数通过解构获取输入框的id和value，使用函数式更新（prevFormData => ...）来修改状态，确保我们基于最新的状态进行操作，避免状态更新的异步问题。
• 每个输入框都是受控组件：value绑定状态值，onChange绑定更新函数，这是React推荐的表单处理方式，能让你完全掌控输入的状态。

最终你的formData状态结构就和你想要的dataToPost完全一致，直接使用即可。

内容的提问来源于stack exchange，提问作者js-learner