之前的文章我们介绍了 React 表单详解 约束性和非约束性组件 input text checkbox radio  select  textarea  以及获取表单的内容。接下来我们将介绍 React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法。

之前我们已经根据 create-react-app 模块创建了一个 React 项目,并定义 App.js 为根组件,即父组件,Home.js 为子组件。我们看一下两个组件的代码:

App.js

 import React, {Component} from 'react';
import Home from './components/Home'; class App extends Component {
constructor(props) {
super(props);
this.state = {
title: "I am father"
}
} fatherFunction = () => {
console.log("I am fatherFunction")
} fatherSelf = () => {
console.log("I am fatherSelf")
} getChildData = (name) => {
console.log(name)
} render() {
return (
<div className="App">
<Home
title={this.state.title}
fatherFunction={this.fatherFunction}
father={this}
/>
</div>
);
}
} export default App;

Home.js

 import React, {Component} from 'react';

 class Home extends Component {
constructor(props) {
super(props);
this.state = {
name: "zhangsan",
}
} render() {
return (
<div>
<p>Hello {this.state.name}</p> {/*接收父组件的传值*/}
{this.props.title} <br/><br/> {/*接收父组件的 fatherFunction 方法*/}
<button onClick={this.props.fatherFunction}>调用父组件的fatherFunction方法</button> <br/><br/> {/*调用父组件的fatherSelf方法*/}
<button onClick={this.props.father.fatherSelf}>调用父组件的fatherSelf方法</button> <br/><br/> {/*子组件给父组件传值*/}
<button onClick={this.props.father.getChildData.bind(this, this.state.name)}>子组件给父组件传值</button>
</div>
);
}
} export default Home;

我们在 App.js 的 render 中 插入 <Home /> 标签,即代表将子组件 Home 挂载到了父组件 App 中。

在父组件 App 标签 <Home /> 标签中传给子组件 Home:

值:

  title={this.state.title},

方法:

  fatherFunction={this.fatherFunction},

整个父组件 App:

father={this}

在子组件 Home 中:

  通过 {this.props.title} 来获取父组件 App 的传值。

  在子组件 Home 的 button 的 onClick 事件中绑定 {this.props.fatherFunction} 来获取父组件 App 传过来的方法。

  在子组件 Home 的 button 的 onClick 事件中绑定 {this.props.father.fatherSelf} 来获取父组件 App 传过来整个 App 组件中的 fatherSelf 方法,在这里我们可以看出我们并没有向子组件中传递 fatherSelf 方法,但是我们将整个父组件传递给了子组件,所以子组件中能够调用父组件的所有方法和传值。

  由于我们将整个父组件都传递给了子组件,在子组件中我们可以调用父组件的方法并将子组件的值传给父组件来完成父子组件间的通信。我们在子组件中通过 button 的 onClick 事件调用父组件的 getChildData 方法将 name 值传给父组件。onClick = {this.props.father.getChildData.bind(this, this.state.name)}。然后我们在父组件 App 中就可以获取到子组件 Home 传递过来的 name 值了。

运行结果如下:

以上就是父子组件间的通信,当然子组件向父组件传值和方法还可以通过 ref 和 refs 来实现。如下:

App.js

 import React, {Component} from 'react';
import Home from './components/Home'; class App extends Component {
getChildData = () => {
console.log(this.refs.child.state.name);
this.refs.child.childFunction();
} render() {
return (
<div className="App">
<Home ref="child"/>
<button onClick={this.getChildData}>获取子组件的传值和方法</button>
</div>
);
}
} export default App;

Home.js

import React, {Component} from 'react';

class Home extends Component {
constructor(props) {
super(props);
this.state = {
name: "zhangsan",
}
} childFunction = () => {
console.log("I am child")
} render() {
return (
<div>
<p>Hello {this.state.name}</p>
</div>
);
}
} export default Home;

我们在父组件 App 中挂载子组件 Home,并在标签<Home /> 中插入 ref="child",意思是将子组件 Home 通过 ref 传过来。然后在父组件 App 中的 button 的 onClick 事件中定义 getChildData 方法,在该方法里可以通过 this.refs.child.state.name 来获取子组件 Home 的 name 值,通过 this.refs.child.childFunction() 来调用子组件 Home 的 childFunction 方法。

最后运行结果如下:

React 从入门到进阶之路(七)的更多相关文章

  1. React 从入门到进阶之路(四)

    之前的文章我们介绍了  React 绑定属性( 绑定class  绑定style).引入图片  循环数组渲染数据.接下来我们将介绍 React 事件,方法, React定义方法的几种方式 获取数据 改 ...

  2. React 从入门到进阶之路(三)

    之前的文章我们介绍了 React 创建组件.JSX 语法.绑定数据和绑定对象.接下来我们将介绍 React 绑定属性( 绑定class  绑定style).引入图片  循环数组渲染数据. 上一篇中我们 ...

  3. React 从入门到进阶之路(五)

    之前的文章我们介绍了  React 事件,方法, React定义方法的几种方式 获取数据 改变数据 执行方法传值.接下来我们将介绍 React 表单事件 键盘事件 事件对象以及 React中 的 re ...

  4. React 从入门到进阶之路(六)

    之前的文章我们介绍了 React 表单事件 键盘事件 事件对象以及 React中 的 ref 获取 dom 节点 .双向数据绑定.接下来我们将介绍 React 表单详解 约束性和非约束性组件 inpu ...

  5. React 从入门到进阶之路(八)

    之前的文章我们介绍了 React中的组件.父子组件.React props父组件给子组件传值.子组件给父组件传值.父组件中通过refs获取子组件属性和方法.接下来我们将介绍 React propTyp ...

  6. React 从入门到进阶之路(九)

    之前的文章我们介绍了 React propTypes  defaultProps.接下来我们将介绍 React 生命周期函数. 之前我们已经根据 create-react-app 模块创建了一个 Re ...

  7. React 从入门到进阶之路(二)

    在之前的文章中我们介绍了 React 开发的环境搭建及目录介绍和整理,本篇文章将介绍 React 创建组件.JSX 语法.绑定数据和绑定对象. 之前我们已经将项目运行了起来,我们再来看一下目录结构: ...

  8. React 从入门到进阶之路(一)

    在开始 React 学习之前我们先进入官网 https://react.docschina.org/ 看看官方对 React 的解释:React 是用于构建用户界面的JavaScript 库.我们只需 ...

  9. Python 爬虫从入门到进阶之路(七)

    在之前的文章中我们一直用到的库是 urllib.request,该库已经包含了平常我们使用的大多数功能,但是它的 API 使用起来让人感觉不太好,而 Requests 自称 “HTTP for Hum ...

随机推荐

  1. js event 的target 和currentTarget

    target  点击的实际tag currentTarget 绑定事件的target

  2. Java泛型擦除

    Java泛型擦除: 什么是泛型擦除? 首先了解一下什么是泛型?我个人的理解:因为集合中能够存储随意类型的对象.可是集合中最先存储的对象类型一旦确定后,就不能在存储其它类型的对象了,否则,编译时不会报错 ...

  3. php 中 isset 和empty 的区别

    昨天终于开始学习php了,这个对于我来说听着很熟悉,但是学起来很陌生的东西,尤其是课上能听明白 但是真正写起了手生,都不知道手该往哪里放了,天哪~~~ 其中课上有讲到 isset和empty的区别,现 ...

  4. uGUI动态加载控件位置错误(转自:https://www.cnblogs.com/mezero/p/4542939.html)

    最近在使用uGUI时遇到了一个问题,在此记录一下.在Canvas的Render Mode设置为Screen Space-Overlay模式时,动态加载控件是不会发生问题的.但是在Screen Spac ...

  5. opencv配置指南

    今天配置了一把opencv,在vs2013,Python.IDEA(Java)上分别作了配置.总结成文档,分享给大家. 搭建opencv+vs2013的环境 安装opencv3.0 alpha 和 v ...

  6. UITextInputMode类的使用

    转载请注明:http://blog.sina.com.cn/s/blog_69081e060100v7ad.html   UITextInputMode大家看了是不是有些陌生呢?这个类是在4.2之后才 ...

  7. Cisco设备参数总结

    Cisco设备参数总结 1.MAC与TCAM的区别:两张表所其作用的环境不同,MAC表是全局表,一般通过全局CPU进程转发需要查看MAC表,但是,现在基本都是硬件快速转发,那么这个时候就生成了CAM表 ...

  8. 负载均衡LVS

    可参考:http://ixdba.blog.51cto.com/2895551/555738 http://os.51cto.com/art/201202/319979.html 也可以参考官网:ht ...

  9. Ace(二)Demo示例

    Client: #include "ace/Log_Msg.h" #include "ace/OS.h" #include "ace/Service_ ...

  10. html body div height: 100%;

    最近做了测试 html{ height: 100%;//全部内容高度,包括滚动出现的内容 background-color:#000;} body{height: 100%;//只一页屏幕,用作滚动的 ...