React|React refs和onRefs的使用 Reactrefs和onRefs的使用

【React|React refs和onRefs的使用】父组件代码块

constructor(props){ super(props); this.refBox = React.createRef() this.state={ message:"i am from parent" content:"1111" } } handleChange = ()=>{ this.setState({ message:"changed by parent" }) } render(){ const = { message,content } = this.state; //parentMethods 中可以放变量，方法，对应的到子组件中可以直接使用 const parentMethods = { msg:message, handleChange:this.handleChange } return( ) } }

子组件代码块

@Form.create() export default class Child extends React.Component { constructor(props) { super(props); this.state = { childMsg:"I am from child" }; } render() { //msg,handleChange两个参数就是从父组件中获取的 const { msg,handleChange,form:{getFieldDecorator}} = this.props return (handleChange()}>{msg}//显示的内容就是 "i am from parent" {getFieldDecorator("name",{ initialValue:null })( )} ); } }

父组件向子组件传值主要依靠父组件中parentMethods将方法和变量传递到子组件中父组件获取子组件的form表单数据并且可以操作方式一：在父组件使用子组件的地方添加ref={this.refBox}然后在constructor中添加声明

image.png
然后就可以在父组件中拿到子组件关于form表单的变量内容
this.refBox.current，如果不清楚的话，可以在使用之前先console.log(this.refBox.current),就可以看到里面的具体内容如下图所示：
image.png
方式二：

this.refBox=ref } />

方式三：

三种方式写法不一样，使用都是一样的通过this.×××.current改变子组件中的form表单
父子组件间的通信：

{this.child = ref; }} />

子组件获取父组件中得方法或者变量，还是按照最上面第一张图中得注释，定义一个parentMethods来传递
父组件获取子组件state定义的变量
this.child.state.childMsg ,console.log(this.child)如下图所示：
image.png
我一般会把方式二和父子组件得通信混淆，写法上一个是ref一个是onRef，大家可以自己尝试一下，写这篇文章也是为了让自己对react有更深入的了解，谢谢。