如何使用钩子在React中将子组件状态传递到父组件状态

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

function ParentComponent() {
  const [parentState, setParentState] = useState('');

  const handleChildStateChange = (childState) => {
    setParentState(childState);
  };

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

export default ParentComponent;

// 子组件
import React, { useState } from 'react';

function ChildComponent({ onStateChange }) {
  const [childState, setChildState] = useState('');

  const handleStateChange = (event) => {
    const newState = event.target.value;
    setChildState(newState);
    onStateChange(newState);
  };

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

export default ChildComponent;