React Typescript中父组件触发事件时如何调用子组件方法

核心思路 #

React默认不允许直接访问子组件内部方法，需要通过以下API配合实现：

• useRef：父组件创建ref引用挂载到子组件上
• forwardRef：子组件接收父组件传递的ref并转发
• useImperativeHandle：子组件主动暴露指定的方法给父组件调用

1. 修改需要被调用方法的子组件（以你需求里的Child2为例） #

import * as React from 'react';
import { useState, useImperativeHandle, forwardRef } from 'react';

// 定义子组件对外暴露的方法类型，用于TS类型校验
export interface Child2Expose {
  callme: () => void;
}

// 用forwardRef包裹组件，接收props和ref参数
export const Child2 = forwardRef<Child2Expose, Record<string, unknown>>((props, ref) => {
  const [textValue, setTextValue] = useState('你的原有状态');
  
  function callme() {
    // 你原本要执行的内部逻辑
    console.log("Child2的callme方法被触发");
  }

  // 对外暴露指定方法
  useImperativeHandle(ref, () => ({
    callme
  }));

  return (
    <div>
      {/* Child2原有渲染逻辑 */}
    </div>
  );
});

// 给组件加displayName方便调试
Child2.displayName = 'Child2';

如果你实际要调用的是Child1的callMe方法，按照上述逻辑改造Child1即可。

2. 修改父组件Parent.tsx #

import * as React from 'react';
import { useRef } from 'react';
import { Child1 } from '../components/Child1';
import { Child2, Child2Expose } from '../components/Child2';

const Parent: React.FC = () => {
    // 创建和子组件暴露类型绑定的ref
    const child2Ref = useRef<Child2Expose>(null);

    function changeValue() {
        console.log("hello");
        // 调用子组件方法，加可选链避免子组件未挂载时报错
        child2Ref.current?.callme();
    }
  return (
    <div>
        <Child1 changeValue={changeValue}/>
        {/* 把ref挂载到子组件上 */}
        <Child2 ref={child2Ref}/>
      </div>
  );
};
export default Parent;

3. 修复你现有Child1.tsx的已知问题 #

你现有代码里的onChange事件绑定、props类型定义都有错误，修改后如下：

import * as React from 'react';
import { useState } from 'react';

// 定义Props类型
interface Child1Props {
  changeValue: () => void;
  data?: string;
}

export const Child1: React.FC<Child1Props> = (props) => {
  const [textValue, setTextValue] = useState(
    'let name; \n' + 'let age; \n' + 'name = 5;'
  );
 function callMe() {
   // 原有逻辑
 }

  return (
    <div>
      <textarea
        id="details"
        name="details"
        value={props.data ?? textValue}
        // 正确绑定触发父组件方法
        onChange={() => props.changeValue()}
      />
    </div>
  );
};

注意事项 #

不要滥用这种父调用子的模式，大部分场景可以通过把公共状态提升到父组件、再通过props传递给子组件的方式实现需求，只有当操作子组件内部逻辑确实不需要父组件感知时，再用本方案。

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