在不使用onChange react的情况下将值从子对象传递到父对象

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

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

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

  return (
    <div>
      <ChildComponent onValueChange={handleValueChange} />
      <p>Value in parent component: {value}</p>
    </div>
  );
}

export default ParentComponent;

import React from 'react';

function ChildComponent({ onValueChange }) {
  const handleInputChange = (event) => {
    const newValue = event.target.value;
    onValueChange(newValue);
  };

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

export default ChildComponent;

import React, { useState, createContext, useContext } from 'react';

const ValueContext = createContext();

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

  return (
    <ValueContext.Provider value={value}>
      <ChildComponent />
      <p>Value in parent component: {value}</p>
    </ValueContext.Provider>
  );
}

function ChildComponent() {
  const value = useContext(ValueContext);

  const handleInputChange = (event) => {
    const newValue = event.target.value;
    setValue(newValue);
  };

  return (
    <div>
      <input type="text" onChange={handleInputChange} />
      <p>Value in child component: {value}</p>
    </div>
  );
}

export default ParentComponent;