React子组件向父组件传值

在 React 中，子组件向父组件传值的常用方式是通过回调函数。具体步骤如下：

1. 在父组件中定义一个回调函数，用于接收子组件传递的值。

2. 将该回调函数作为 props 传递给子组件。

3. 在子组件中，触发回调函数，并将要传递的值作为参数传递给该回调函数。

4. 在父组件中接收到子组件传递的值，并在需要的时候将其更新到状态中。

示例代码如下：

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

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

  const handleChildValue = (childValue) => {
    setValue(childValue);
  };

  return (
    <div>
      <ChildComponent onChildValue={handleChildValue} />
      <p>子组件传递的值为: {value}</p>
    </div>
  );
}

// 子组件
import React from 'react';

function ChildComponent(props) {
  const handleClick = () => {
    props.onChildValue('Hello, Parent Component!');
  };

  return (
    <button onClick={handleClick}>向父组件传递值</button>
  );
}

在上面的示例代码中，子组件 `ChildComponent` 定义了一个按钮，当点击该按钮时，会触发回调函数 `props.onChildValue` 并将要传递的值 `'Hello, Parent Component!'` 作为参数传递给该函数。在父组件 `ParentComponent` 中，定义了回调函数 `handleChildValue`，并将该函数作为 props 传递给子组件 `ChildComponent`。当子组件触发回调函数后，父组件会接收到子组件传递的值，并将其更新到状态中，最终在页面上显示出来。