【forwardRef与useImperativeHandle】

news2024/11/23 15:49:25

1、

在这里插入图片描述

2、

在这里插入图片描述

3、

在这里插入图片描述

4、代码

1、index.tsx代码

import React, {useRef, useEffect} from 'react'
import MyInput from "./InputItem";

export default function Index() {
  const ref = useRef<any>(null);
  useEffect(() => {
    ref.current?.focus();
  }, [])
  return (<>
      <MyInput
        ref={ref}
        placeholder={'请输入'}
      />
    </>
  )
}

2、InputItem.tsx代码

import React, {useRef, forwardRef, useImperativeHandle, useEffect} from 'react'
import {Input, InputProps, InputRef} from 'antd'

type InputItemProps = InputProps & {
  /** 父组件传递给子组件的ref */
  ref: React.RefObject<HTMLInputElement>;
}

const MyInput = forwardRef((props: InputItemProps, ref) => {
  // 子组件自己创建自己的ref
  const inputRef = useRef<InputRef>();

  // 通过useImperativeHandle再把这个内部的ref暴露出去
  // 使用这个的意义就是不暴露整个inputDOM节点，
  // 能够自定义暴露出什么给父组件使用
  useImperativeHandle(ref, () => {
    return inputRef.current;
  })

  return (
    <Input
      {...props}
      ref={inputRef}
    />
  )
})

// function MyInput1(props: InputItemProps) {
//   const {ref, ...restProps} = props;
//   return (
//     <Input
//       ref={ref}
//       {...restProps}
//     />
//   )
// }

export default MyInput