将值从嵌套的react组件childs传递到窗体onSubmit句柄函数

// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [value, setValue] = useState('');

  const handleValueChange = (newValue) => {
    setValue(newValue);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // 在这里可以访问到从子组件传递过来的值value，并进行相应的处理
    console.log(value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <ChildComponent onValueChange={handleValueChange} />
      <button type="submit">Submit</button>
    </form>
  );
};

export default ParentComponent;

// 子组件
import React from 'react';

const ChildComponent = ({ onValueChange }) => {
  const handleChange = (event) => {
    const newValue = event.target.value;
    // 调用父组件传递的回调函数，将值传递给父组件
    onValueChange(newValue);
  };

  return (
    <input type="text" onChange={handleChange} />
  );
};

export default ChildComponent;