如何在React中将子useState传递给父对象？功能组件

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

function ParentComponent() {
  const [childState, setChildState] = useState('');

  const handleChildStateChange = (newState) => {
    setChildState(newState);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <p>Child State in Parent: {childState}</p>
      <ChildComponent onStateChange={handleChildStateChange} />
    </div>
  );
}

export default ParentComponent;

import React, { useState } from 'react';

function ChildComponent({ onStateChange }) {
  const [localState, setLocalState] = useState('');

  const handleChange = (event) => {
    const newValue = event.target.value;
    setLocalState(newValue);
    onStateChange(newValue); // 调用父组件传递的回调函数
  };

  return (
    <div>
      <h2>Child Component</h2>
      <input type="text" value={localState} onChange={handleChange} />
    </div>
  );
}

export default ChildComponent;

import React, { useState, useCallback } from 'react';

function ParentComponent() {
  const [childState, setChildState] = useState('');

  const handleChildStateChange = useCallback((newState) => {
    setChildState(newState);
  }, []);

  return (
    <div>
      <h1>Parent Component</h1>
      <p>Child State in Parent: {childState}</p>
      <ChildComponent onStateChange={handleChildStateChange} />
    </div>
  );
}