Component父组件与hook子组件在antd Form中的时候,使用ref获取参数

前端菜鸟

前情:我需要在Component中获取hook中某个参数的值,而hook被Form包了一层,此时我没有办法简单地通过ref获取hook中的参数。

开发过程当中查了很久最终解决了,记录一下方便以后查阅。
本文记录Component为父组件,hook为子组件的情况。

我的习惯是一个组件放一个文件。

父组件ParentCom.jsx:

import ChildHook from './ChildHook.jsx';
export default class ParentCom extends React.Component{
    constructor(){
        super();
        this._subRef = React.createRef();
    }
    
    _onClick=()=>{
        console.log(this._subRef.status);
    }

    render(){
        <ChildHook wrappedComponentRef={(ref)=this._subRef = ref} />
        <input onClick={this._onClick} />
    };
}

子组件ChildHook.jsx

const SubHook = (props)=>{
    let statusRef = React.useRef(true);

    // 在hook中使用ref需要fowardRef、useImperativeHandle配合。
    useImperativeHandle(props.refInstance, ()=({
        status: statusRef.current
    }));
}

const SubHookForwardRef = fowardRef((props, ref)=>(
    <SubHook {...props} refInstance={ref} />
));

export default Form.create()(SubHookForwardRef);
阅读 66
1 声望
0 粉丝
0 条评论
你知道吗?

1 声望
0 粉丝
宣传栏