在React上将数据从子组件传输到父组件

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

function ParentComponent() {
  const [data, setData] = useState('');

  const handleDataChange = (newData) => {
    setData(newData);
  };

  return (
    <div>
      <ChildComponent onDataChange={handleDataChange} />
      <p>Data from child component: {data}</p>
    </div>
  );
}

export default ParentComponent;

import React, { useState } from 'react';

function ChildComponent({ onDataChange }) {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  const sendDataToParent = () => {
    onDataChange(inputValue);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <button onClick={sendDataToParent}>Send Data</button>
    </div>
  );
}

export default ChildComponent;