高阶组件内部调用问题

需求:父组件里有个子组件,子组件是个表单,父组件要调用子组件的方法。

操作:使用常规的refs.child.fn(), 结果试了好几次没成功,差点怀疑人生,

坑:后来发现是因为子组件用了rc-form的createForm方法把子组件给封装了一下

"react": "^17.0.2",
"antd-mobile": "^2.3.4",

子组件:
import { createForm } from ‘rc-form’;
export class Childt extends Component {
run = () => { console.log(‘我是子组件的方法’)} // 方法
render() {return (

我是Child
) }
}
export default createForm()(Childt)

父组件:
此时如果使用正常的ref来调用子组件将会报错this.refs.fn is not a function;
原因:获取到的refs其实是调用form.create方法后被重新封装过了,返回的应该是一个新的对象。

调用自定义组件的时候如果想取到最初始的组件对象,需要调用一下rc-form提供的wrappedComponentRef,这个属性的返回值就是我们要的初始对象
// 使用wrappedComponentRef
<Childt wrappedComponentRef={(form)=>{this.childt = form}}>
点击

click=()=>{
this.childt.run() // 成功
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值