forwardRef简单使用

forwardRef实际上就是当父组件需要得到子组件元素时，可以利用forwardRef来实现，下面我们来看一下简单的例子

1、在子组件中点击搜素按钮时，让文本输入框处于聚焦状态，此时可以直接使用ref来实现

import React, { useRef } from "react";
import { ReactDOM } from "react";
import { Button } from "antd";

const MyInput = () => {
  const myRef = useRef<any>();
  const onSearch = () => {
    const { current } = inputRef;
    current?.focus();
  };
  return (
    // 当点击搜索按钮的时候，输入框处于聚焦状态
    <div>
      2022-05-29
      <input type="text" placeholder="请输入内容" ref={inputRef} />
      <Button type="primary" onClick={onSearch}>
        搜索
      </Button>
    </div>
  );
};
export default MyInput;

在父组件正常引入即可；

2、点击父组件搜索按钮时，子组件文本输入框需要处于聚焦状态

父组件中代码内容

import React, {
  Component,
  Suspense,
  createRef,
} from "react";
import MyInput from "./components/MyInput";
const App = () => {
  const inputRef = createRef();
  // 点击父组件中的搜素按钮
  const onClick = () => {
    const { current } = inputRef;
    current?.focus();
  };
  return (
    <div>
      {/* 在父组件中，当点击搜索按钮，使子组件输入框处于聚焦的状态 
       1、当我们试图给函数式组件给予ref属性的时候，会发现并不支持；
       2、此时需要将子组件用forwardRef进行包裹，它的第二个参数即为我们所需要的元素，当拿到子组件元素的时候，则父组件可以利用此元素对子组件进行操作；
      */}
        <MyInput ref={inputRef} />
        <button onClick={onClick}>父组件搜索按钮</button>
     </div>
  );
};
export default App;

子组件中的代码

import React, {forwardRef } from "react";
import { ReactDOM } from "react";
import { Button } from "antd";

const MyInput = forwardRef((params, inputRef: any) => {
  const onSearch = () => {
    const { current } = inputRef;
    current?.focus();
  };
  return (
    <div>
      2022-05-29
      <input type="text" placeholder="请输入内容" ref={inputRef} />
      <Button type="primary" onClick={onSearch}>
        搜索
      </Button>
    </div>
  );
});
export default MyInput;