React 子组件传递参数到父组件 - 回调函数方法

要将参数从子组件传递到父组件，可以使用回调函数。在父组件中定义一个函数，作为 prop 传递给子组件。子组件可以在需要时调用该函数，并将参数作为参数传递给该函数。以下是一个示例：

父组件：

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

function ParentComponent() {
  const [message, setMessage] = useState('');

  function handleMessage(message) {
    setMessage(message);
  }

  return (
    <div>
      <ChildComponent onMessage={handleMessage} />
      <p>Message from child: {message}</p>
    </div>
  );
}

export default ParentComponent;

子组件：

import React, { useState } from 'react';

function ChildComponent(props) {
  const [message, setMessage] = useState('');

  function handleClick() {
    props.onMessage(message);
  }

  function handleInputChange(event) {
    setMessage(event.target.value);
  }

  return (
    <div>
      <input type='text' value={message} onChange={handleInputChange} />
      <button onClick={handleClick}>Send message to parent</button>
    </div>
  );
}

export default ChildComponent;

在上面的示例中，父组件定义了一个名为 handleMessage 的函数，并将其作为 prop 传递给子组件。子组件使用 useState 定义了一个名为 message 的状态，并在输入框中使用它。当用户单击按钮时，子组件调用 onMessage prop 并传递当前消息作为参数。此时，父组件中的 handleMessage 函数将被调用，并将传递的消息设置为父组件中的状态变量。最后，父组件将消息显示在屏幕上。