在React (钩子)中将子组件中的多个表单输入字段的数据传递给其父组件

import React, { useState } from 'react';

function ParentComponent() {
  const [formData, setFormData] = useState({});

  // 处理子组件传递的表单数据
  const handleFormChange = (data) => {
    setFormData(data);
  };

  return (
    <div>
      <ChildComponent onChange={handleFormChange} />
      <p>父组件中的表单数据：{JSON.stringify(formData)}</p>
    </div>
  );
}

import React, { useState } from 'react';

function ChildComponent({ onChange }) {
  const [input1, setInput1] = useState('');
  const [input2, setInput2] = useState('');

  // 处理表单数据变化
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    if (name === 'input1') {
      setInput1(value);
    } else if (name === 'input2') {
      setInput2(value);
    }

    // 将表单数据传递给父组件
    onChange({ input1, input2 });
  };

  return (
    <div>
      <input type="text" name="input1" value={input1} onChange={handleInputChange} />
      <input type="text" name="input2" value={input2} onChange={handleInputChange} />
    </div>
  );
}