在react.js中访问父级中的子级变量

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

function ParentComponent() {
  const [childVariable, setChildVariable] = useState('');

  const handleChildVariableChange = (value) => {
    setChildVariable(value);
  };

  return (
    <div>
      <ChildComponent onChange={handleChildVariableChange} />
      <p>Child variable in parent component: {childVariable}</p>
    </div>
  );
}

export default ParentComponent;

import React, { useState } from 'react';

function ChildComponent({ onChange }) {
  const [childVariable, setChildVariable] = useState('');

  const handleVariableChange = (event) => {
    const value = event.target.value;
    setChildVariable(value);
    onChange(value); // 将子级变量传递给父级组件
  };

  return (
    <div>
      <input type="text" value={childVariable} onChange={handleVariableChange} />
    </div>
  );
}

export default ChildComponent;