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

在React中，数据通常是从父组件传递给子组件的，但有时我们需要将数据从子组件传递回父组件。为了实现这一点，我们可以通过在子组件中定义一个回调函数，并将其作为props传递给子组件。

以下是一个示例：

父组件：

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;

在上面的示例中，父组件ParentComponent通过onDataChange回调函数将数据传递给子组件ChildComponent。子组件中的输入框用于输入数据，并通过handleInputChange函数更新inputValue的状态。当点击"Send Data"按钮时，调用sendDataToParent函数，将inputValue的值通过onDataChange回调函数传递给父组件。

父组件接收到子组件传递的数据后，通过handleDataChange函数更新data的状态，并在页面上显示出来。

这种方式可以实现在React中将数据从子组件传输到父组件。