Ref的一次使用

前置条件：子组件是一个聊天窗口，现在有个 button 在父组件上，要实现点击 button 后将指定消息回填到子组件的输入框里边。

实现思路：将子组件中填信息到输入框的方法暴露出去，父组件通过 createRef 或者 useRef 创建子组件的引用，并通过 ref 调用子组件暴露的方法

父组件

import React, { Component, createRef } from 'react';
import ChildComponent, { ChildComponentRef } from './ChildComponent';

// 父组件的类组件定义
class ParentComponent extends Component {
  // 创建 ref 来引用子组件
  private childRef = createRef<ChildComponentRef>();

  // 调用子组件的方法
  handleClick = () => {
    if (this.childRef.current) {
      this.childRef.current.handleChangeText('回填信息');
    }
  };

  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef} message="来自父组件的消息" />
        <button onClick={this.handleClick}>调用子组件方法</button>
      </div>
    );
  }
}

export default ParentComponent;

子组件

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

// 子组件的 props 类型定义（如果有 props）
interface ChildComponentProps {
  message?: string;
}

// 子组件暴露的方法类型定义
export interface ChildComponentRef {
  handleChangeText: (text: string) => void;
}

// 子组件定义
const ChildComponent = forwardRef<ChildComponentRef, ChildComponentProps>((props, ref) => {
  const [text, setText] = useState<string>('')
  // 回填信息的方法
  const handleChangeText = (text) => {
    setText(text)
  };

  // 使用 useImperativeHandle 暴露方法给父组件
  useImperativeHandle(ref, () => ({
    handleChangeText,
  }));

  return (
    <div>
      <input 
      value={text}
      onChangeText={handleChangeText}
      ...
      />
    </div>
  );
});

export default ChildComponent;