当前位置：首页 > React

react如何触发子组件事件

2026-01-26 00:37:24React

在React中，父组件触发子组件事件通常通过以下方法实现：

使用ref直接调用子组件方法

通过useRef或createRef获取子组件实例，直接调用其内部方法。适用于类组件或使用forwardRef的函数组件。

// 子组件（类组件）
class Child extends React.Component {
  childMethod() {
    console.log('子组件方法被触发');
  }
  render() { return <div>子组件</div>; }
}

// 父组件
function Parent() {
  const childRef = React.useRef(null);

  const handleClick = () => {
    childRef.current.childMethod();
  };

  return (
    <div>
      <button onClick={handleClick}>触发子组件方法</button>
      <Child ref={childRef} />
    </div>
  );
}

通过props传递回调函数

将父组件的函数作为prop传递给子组件，子组件在适当时机调用该函数。

// 子组件
function Child({ onAction }) {
  return <button onClick={onAction}>子组件按钮</button>;
}

// 父组件
function Parent() {
  const handleChildAction = () => {
    console.log('子组件事件触发');
  };

  return <Child onAction={handleChildAction} />;
}

使用自定义事件

通过事件总线或Context API实现跨组件通信，适用于深层嵌套组件。

// 创建事件上下文
const EventContext = React.createContext();

// 父组件
function Parent() {
  const [event, setEvent] = React.useState(null);

  React.useEffect(() => {
    if (event === 'child-event') {
      console.log('捕获到子组件事件');
    }
  }, [event]);

  return (
    <EventContext.Provider value={{ setEvent }}>
      <Child />
    </EventContext.Provider>
  );
}

// 子组件
function Child() {
  const { setEvent } = React.useContext(EventContext);

  const triggerEvent = () => {
    setEvent('child-event');
  };

  return <button onClick={triggerEvent}>触发事件</button>;
}

使用状态提升

将状态管理提升到父组件，通过props控制子组件行为。

// 子组件
function Child({ isActive, onToggle }) {
  return (
    <div>
      <p>状态: {isActive ? '激活' : '未激活'}</p>
      <button onClick={onToggle}>切换状态</button>
    </div>
  );
}

// 父组件
function Parent() {
  const [isChildActive, setIsChildActive] = React.useState(false);

  return (
    <Child 
      isActive={isChildActive}
      onToggle={() => setIsChildActive(!isChildActive)}
    />
  );
}

每种方法适用于不同场景：ref适用于需要直接访问子组件实例的情况；props回调适合简单的父子通信；自定义事件适合复杂组件树；状态提升适合共享状态管理。

react如何触发子组件事件