useImperativeHandle的使用 useImperativeHandle + rc-form 的使用

最新推荐文章于 2025-10-17 09:57:29 发布

原创最新推荐文章于 2025-10-17 09:57:29 发布 · 837 阅读

0 ·

CC 4.0 BY-SA版权

本文详细解析了React中useImperativeHandle钩子的使用方法，通过具体示例展示了如何在父组件中调用子组件的状态和方法，适用于希望深入了解React高级特性的开发者。

useImperativeHandle的作用是，在hook中实现父组件调用子组件中的函数或方法。

要搭配React.forwardRef将子组件包裹。

下面是代码实现：

子组件

function Child(props, ref){
    const [a, setA] = useState(0);
    const getA(){
        return a;
    }
    useImperativeHandle(ref, ()=>{
    return a;
}), [a]}

forwardRef

const ChildWrapper = React.forwardRef(Child);

父组件调用

function Father(props){
    const ref = useRef();
    const [childA, setChildA] = useState();
    const handleGetA = ()=>{
        console.log(ref.curren);
        setChildA(ref.curren);
    }

    return (
        <div>
            <ChildWrapper ref={ref} />
            <button onClick={handleGetA}>获取子组件a的值：{childA}</button>
        </div>
    )
}

在实际应用中，会涉及到rc-form