REACT:如何绑定和呈现多个值

import React, { useState } from 'react';

function MultiValueComponent() {
  const [values, setValues] = useState({ value1: '', value2: '', value3: '' });

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

  return (
    <div>
      <input type="text" name="value1" value={values.value1} onChange={handleChange} />
      <input type="text" name="value2" value={values.value2} onChange={handleChange} />
      <input type="text" name="value3" value={values.value3} onChange={handleChange} />
    </div>
  );
}

export default MultiValueComponent;

// 父组件
function ParentComponent() {
  const values = { value1: 'Hello', value2: 'World', value3: '!' };

  return <ChildComponent values={values} />;
}

// 子组件
function ChildComponent({ values }) {
  return (
    <div>
      <p>{values.value1}</p>
      <p>{values.value2}</p>
      <p>{values.value3}</p>
    </div>
  );
}