使用React.js中的挂钩编辑输入值中的对象数据

import React, { useState } from 'react';

function EditObjectInput() {
  // 初始化对象状态
  const [data, setData] = useState({ name: '', age: '' });

  // 处理输入变化
  const handleChange = (event) => {
    const { name, value } = event.target;
    setData((prevData) => ({
      ...prevData,
      [name]: value,
    }));
  };

  return (
    <div>
      <input
        type="text"
        name="name"
        value={data.name}
        onChange={handleChange}
        placeholder="Name"
      />
      <input
        type="text"
        name="age"
        value={data.age}
        onChange={handleChange}
        placeholder="Age"
      />
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default EditObjectInput;

const handleChange = (event) => {
  const { name, value } = event.target;
  setData((prevData) => ({
    ...prevData,
    [name]: value,
  }));
};

setData((prevData) => ({
  ...prevData,
  [name]: value,
}));