本实例主要是记录useRef在自定义组件上面的使用方法,包括子组件暴漏方法或属性给父组件,forwardRef
useImperativeHandle
等的实战
实现效果
代码实现
- 父组件
import React, { useRef } from 'react'
import UseRefCustomChildDemo, { UseRefCustomChildDemoRef } from './UseRefCustomChildDemo'
import { Button, Flex, Space } from 'antd'
function UseRefCustomDemo() {
const useChildRef = useRef<UseRefCustomChildDemoRef>(null)
return (
<div>
<h2>UseRefCustomDemo</h2>
<hr />
<Space direction='vertical'>
<UseRefCustomChildDemo ref={useChildRef} username='zs' />
<Flex justify='center' gap={'20px'}>
<Button
onClick={() => {
console.log(useChildRef)
useChildRef.current?.handleFocus()
}}
>
获取焦点
</Button>
<Button
type='primary'
onClick={() => {
useChildRef.current?.handleSelect()
}}
>
选中文字
</Button>
<Button
type='primary'
danger
onClick={() => {
useChildRef.current?.handleClick()
}}
>
修改信息
</Button>
</Flex>
</Space>
</div>
)
}
export default UseRefCustomDemo
- 子组件
import { Flex } from 'antd'
import React, { forwardRef, ReactNode, useImperativeHandle, useRef } from 'react'
import { useImmer } from 'use-immer'
type Props = { children?: ReactNode; username: string }
export interface UseRefCustomChildDemoRef {
handleFocus: () => void
handleSelect: () => void
handleClick: () => void
}
const UseRefCustomChildDemo = forwardRef<UseRefCustomChildDemoRef, Props>((props, ref) => {
const { username } = props
const [userInfo, setUserInfo] = useImmer({
name: 'lisi',
age: 18
})
function handleClick(): void {
setUserInfo(draft => {
draft.age += 1
})
}
const inputRef = useRef<HTMLInputElement>(null)
useImperativeHandle(ref, () => {
return {
handleFocus() {
inputRef.current!.focus()
},
handleSelect() {
inputRef.current?.select()
},
handleClick() {
handleClick()
}
}
}, [])
return (
<div>
<p>姓名:{username ? username : userInfo.name}</p>
<p>年龄:{userInfo.age}</p>
<Flex justify='center' gap={'20px'}>
<input type='text' ref={inputRef} />
<button onClick={handleClick}>修改年龄</button>
</Flex>
</div>
)
})
UseRefCustomChildDemo.displayName = 'UseRefCustomChildDemo'
export default UseRefCustomChildDemo