1、
2、
文章来源：https://www.toymoban.com/news/detail-785781.html
3、
文章来源地址https://www.toymoban.com/news/detail-785781.html
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
到了这里，关于【forwardRef与useImperativeHandle】的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
