如何在React中实现子组件向父组件触发事件（类Vue $emit功能）

你在Vue中通过$emit实现子组件通知父组件的逻辑，在React中没有类似的emit机制，核心思路是父组件传递回调函数作为props给子组件，子组件在需要通知的时机直接调用这个回调即可，不管是按钮点击、列表添加项还是其他事件场景都适用。

先回顾你给出的Vue实现示例：

// 子组件 EventButton
<button @click="$emit('someEvent')">
  Emit event
</button>

// 父组件
<EventButton @someEvent="() => { /* 执行操作 */ }" />

以下是React中的具体实现方式：

函数组件实现（主流方案） #

基础按钮点击场景 #

// 子组件 EventButton.jsx
export default function EventButton({ onSomeEvent }) {
  return (
    <button onClick={onSomeEvent}>
      触发事件通知父组件
    </button>
  );
}

// 父组件 ParentComponent.jsx
import EventButton from './EventButton';

export default function ParentComponent() {
  const handleSomeEvent = () => {
    // 这里编写父组件需要执行的逻辑
    console.log('子组件触发了事件');
  };

  return (
    <div>
      <EventButton onSomeEvent={handleSomeEvent} />
    </div>
  );
}

列表添加项场景（非按钮点击触发） #

比如子组件内完成添加列表项的操作后通知父组件更新：

// 子组件 ListItemAdder.jsx
import { useState } from 'react';

export default function ListItemAdder({ onItemAdded }) {
  const [inputValue, setInputValue] = useState('');

  const handleAdd = () => {
    if (inputValue.trim()) {
      // 调用父组件传入的回调，还可以携带数据传递给父组件
      onItemAdded(inputValue);
      setInputValue('');
    }
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="输入内容添加"
      />
      <button onClick={handleAdd}>添加</button>
    </div>
  );
}

// 父组件 ParentComponent.jsx
import ListItemAdder from './ListItemAdder';
import { useState } from 'react';

export default function ParentComponent() {
  const [list, setList] = useState([]);

  const handleItemAdded = (newItem) => {
    // 父组件接收数据并更新自身状态
    setList(prev => [...prev, newItem]);
  };

  return (
    <div>
      <ListItemAdder onItemAdded={handleItemAdded} />
      <ul>
        {list.map((item, idx) => (
          <li key={idx}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

类组件实现（旧项目兼容方案） #

如果项目仍在使用类组件，逻辑一致，通过props传递回调：

// 子组件 EventButton.jsx
import React from 'react';

class EventButton extends React.Component {
  render() {
    return (
      <button onClick={this.props.onSomeEvent}>
        触发事件通知父组件
      </button>
    );
  }
}

export default EventButton;

// 父组件 ParentComponent.jsx
import React from 'react';
import EventButton from './EventButton';

class ParentComponent extends React.Component {
  handleSomeEvent = () => {
    console.log('子组件触发了事件');
  };

  render() {
    return (
      <div>
        <EventButton onSomeEvent={this.handleSomeEvent} />
      </div>
    );
  }
}

export default ParentComponent;

内容的提问来源于stack exchange，提问作者murkut23