项目使用`antd-react`组件库。用`Form.create`想要拿到`ref`,即想拿到子组件的数据和方法,可以使用`wrappedComponentRef`

项目使用antd-react组件库。用Form.create想要拿到ref,即想拿到子组件的数据和方法,可以使用wrappedComponentRef

以下为官方举例

	
	class CustomizedForm extends React.Component { ... }
	
	// use wrappedComponentRef
	const EnhancedForm =  Form.create()(CustomizedForm);
	<EnhancedForm wrappedComponentRef={(form) => this.form = form} />
	this.form // => The instance of CustomizedForm

一开始被形参form误导了,一直以为拿到的ref只是antd-react组件库封装的form实例。下面自己敲了下代码,其实拿到的this.form相当于子组件

	
	class ChildForm extends React.Component { 
		say() {
			console.log('hello')
		}
		...
	}
	
	const Child =  Form.create()(ChildForm);

	class Parent extends React.Component {
		...
		getChild() {
			console.log(this.form.props.form)
			console.log(this.form.say)
			// 以上两个都可以拿到
			// 再consle.log(this.form)
			console.log(this.form)
			// 发现拿到就是`ChildForm`本身
		}

		react() {
			return (
				<div>
					<button onclick={this.getChild}>click</button>
					<Child wrappedComponentRef={(form) => this.form = form} />
				</div>
			)
		}
	
	}

以上个人总结,可能有误。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值