【forwardRef与useImperativeHandle】

2024-01-08 11:39:16

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

文章来源:https://blog.csdn.net/m0_56542349/article/details/135452104
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。