怎么通过props把子组件的值传回给父组件

在React中，将子组件的值传回给父组件通常使用回调函数或者事件系统，这里我们看两种常见的方法：

### 1. 使用回调函数 (Props with Callback)

如果子组件需要通知父组件更新某个值，可以定义一个名为`onChange`或者类似名称的函数作为props传递给子组件。子组件可以在状态改变时调用这个函数并传递新的值。

**父组件 (ParentComponent.js)**:

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

function ParentComponent() {
  const [childValue, setChildValue] = useState('');

  function handleChildValueChange(value) {
    setChildValue(value);
  }

  return (
    <div>
      <ChildComponent onChange={handleChildValueChange} />
      <p>子组件传递回来的值: {childValue}</p>
    </div>
  );
}

export default ParentComponent;

**子组件 (ChildComponent.js)**:

import React, { useState } from 'react';

const ChildComponent = ({ onChange }) => {
  const [componentValue, setComponentValue] = useState('');

  // ... 子组件内部操作

  // 当子组件状态改变时，通过onChange回调传递新值
  const handleChange = (newValue) => {
    setComponentValue(newValue);
    onChange(newValue); // 调用父组件传递的回调
  };

  return (
    <input type="text" value={componentValue} onChange={(e) => handleChange(e.target.value)} />
  );
};

export default ChildComponent;

### 2. 使用事件系统 (Event Emitter Pattern or Context API)

如果你希望跨层级通信，还可以考虑使用事件总线、Context API或者Redux等工具。例如，可以设置一个全局的事件中心，子组件在更改状态时发布事件，父组件监听这些事件。

**事件总线 (EventBus.js):**

class EventBus {
  emit(eventName, data) {
    // ... 实现事件广播逻辑
  }

  on(eventName, callback) {
    // ... 实现在特定事件上注册回调
  }
}

**父组件 (ParentComponent.js):**

import EventBus from './EventBus';

function ParentComponent() {
  // 创建并订阅事件
  const bus = new EventBus();
  bus.on('childValueChanged', (value) => setChildValue(value));

  // ... 其他代码 ...

  return (
    <div>
      <ChildComponent bus={bus} />
    </div>
  );
}

**子组件 (ChildComponent.js):**

import React, { useState } from 'react';
import { EventBus } from './EventBus'; // 引入事件总线模块

const ChildComponent = ({ bus }) => {
  // ... 更新状态

  bus.emit('childValueChanged', componentValue);
  // ... 其他代码 ...
};