React学习10----父子组件之间相互传值

React中的组件: 解决html 标签构建应用的不足。
使用组件的好处：把公共的功能单独抽离成一个文件作为一个组件，哪里里使用哪里引入。

父子组件：组件的相互调用中，我们把调用者称为父组件，被调用者称为子组件
项目结构：

下面的例子：Father.js 是父组件，Son.js是子组件

父组件给子组件传值
1.父组件中，在调用子组件的时候定义一个属性

title = {this.state.title}，传一个 title 属性
getData ={this.getData}，传一个getData方法
father={this}, 整个组件传过去

例如：

   <Son title = {this.state.title} getData ={this.getData} father={this}/>

2.子组件中，接收传过来的值：
接收 title 属性
this.props.title
接收 getData 方法
this.props.getData
接收 father 对象
this.props.father

例子1：
Father.js 是父组件：（用来传值）

import React from 'react';
import Son from "./Son";

/**
 * 父子组件：组件的相互调用中，我们把调用者称为父组件，被调用者称为子组件
 * 在这里Father.js 是父组件，Son.js是子组件
 *
 * 把父组件的对象传给子组件
 */

class Father  extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            title:'父组件的标题',
        }
    }
    getData=()=>{
        alert('我是父组件的getData方法')
    }
    setData=()=>{
        alert('我是父组件的setData方法')
    }
    render() {
        return (
            <div>
                {/* 父组件黑子组件传值 */}
                {/* title = {this.state.title}，传一个 title 属性 */}
                {/* getData ={this.getData}，传一个getData方法 */}
                {/* father={this}, 整个组件传过去 */}
                <Son title = {this.state.title} getData ={this.getData} father={this}/>
            </div>

        );
    }
}
export default Father;

Son.js 是子组件：（用来接收值）

import React from 'react';
class Son extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            name : '子组件',
        }
    }

    render() {
        return(

            <div>
                {/* 接收父组件传过来的属性 */}
                {this.props.title}
                <br/><br/>
                {/* 接收父组件传过来的方法 */}
                <button onClick={this.props.getData}>接收父组件传过来的方法</button>
                <br/><br/>
                {/* 接收父组件，其实就是接收一个对象 */}
                <button onClick={this.props.father.setData}>接收父组件</button>



            </div>
        );
    }


}
export default Son;

例子2：
News.js 是父组件，NewsSport.js是子组件
把父组件的对象传给子组件，子组件调用父组件方法时传值；
父组件 News.js 代码：（用来传值）

import React from 'react';
import NewsSport from "./NewsSport";
/**
 * 父子组件：组件的相互调用中，我们把调用者称为父组件，被调用者称为子组件
 * 在这里News.js 是父组件，NewsSport.js是子组件
 *
 * 把父组件的对象传给子组件，子组件调用父组件方法时传值；
 *
 */

class News  extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            title:'父组件的标题',
        }
    }
    getData=()=>{
        alert('我是父组件的getData方法')
    }
    setData=(args)=>{
        alert('我是父组件的setData方法'+args);
    }
    render() {
        return (
            <div>

                {/* father={this}, 整个组件传过去 */}
                <NewsSport  news={this}/>
            </div>

        );
    }
}
export default News;

子组件 NewsSport.js 中( 接收传过来的对象，调用父组件方法 setData 时传参数)

import React from 'react';
class NewsSport extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            name : '子组件',
        }
    }

    render() {
        return(

            <div>

                <br/> <br/>
                {/* 接收父组件，其实就是接收一个对象 */}
                <button onClick={this.props.news.setData.bind(this,'***子组件news sport 的数据')}>给子组件的setData方法传值</button>

            </div>
        );
    }


}
export default NewsSport;

父组件主动获取子组件的数据

1、父组件调用子组件的时候指定ref的值
例如：

<BlackPeople  ref='blackPeople'/>   

2、父组件通过this.refs.blackPeople 获取整个子组件实例 (dom（组件）加载完成以后获取 )
例子： People.js 父组件； BlackPeople.js 子组件；
People.js代码：

import React from 'react';
import BlackPeople from "./BlackPeople";
/**
 * 父子组件：组件的相互调用中，我们把调用者称为父组件，被调用者称为子组件
 * 在这里People.js 是父组件，BlackPeople.js是子组件
 *
 * 父组件拿到子组件对象，对象就能调用属性和方法了
 *
 */

class People  extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            title:'父组件的标题',
        }
    }
    // 2、通过this.refs.header  获取整个子组件实例  (dom（组件）加载完成以后获取 )
    getData=()=>{
        // 获取子组件对象
         let blackPeople = this.refs.blackPeople;
        //  调用方法  、
        blackPeople.bpGetData();
        //  调用属性
        console.log(blackPeople.state.name);
      }

    render() {
        return (
            <div>
                {/*1、调用子组件的时候指定ref的值*/}
                <BlackPeople  ref='blackPeople'/>
                <button onClick={this.getData}>获取子组件的实例</button>
            </div>

        );
    }
}
export default People;

BlackPeople.js 代码：

import React from 'react';
class BlackPeople extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            name : 'BlackPeople组件',
        }
    }
    //
    bpGetData=()=>{
        alert("BlackPeople 组件的bpGetData方法");
    }

    render() {
        return(

            <div>BlackPeople组件</div>
        );
    }


}
export default BlackPeople;

ok，完了
源码下载：
https://download.csdn.net/download/zhaihaohao1/10980273
rdemo10