当前位置：首页 > news >正文

【REACT18.x】CRA+TS+ANTD5.X实现useImperativeHandle让父组件修改子组件的数据

news 2025/7/27 11:12:12

本实例主要是记录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'}><ButtononClick={() => {console.log(useChildRef)useChildRef.current?.handleFocus()}}>获取焦点</Button><Buttontype='primary'onClick={() => {useChildRef.current?.handleSelect()}}>选中文字</Button><Buttontype='primary'dangeronClick={() => {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: () => voidhandleSelect: () => voidhandleClick: () => void
}const UseRefCustomChildDemo = forwardRef<UseRefCustomChildDemoRef, Props>((props, ref) => {const { username } = propsconst [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