将React useState挂钩转换为传入属性并更新属性值

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

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

  return (
    <div>
      <h1>Parent Component</h1>
      <p>Value from Child: {value}</p>
      <ChildComponent value={value} onChange={setValue} />
    </div>
  );
}

export default ParentComponent;

// ChildComponent.js
import React from 'react';

function ChildComponent({ value, onChange }) {
  const handleChange = (event) => {
    onChange(event.target.value);
  };

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

export default ChildComponent;

// 使用函数式状态更新确保获取最新的状态
const handleChange = (event) => {
  onChange((prevValue) => event.target.value);
};