React入门---事件与数据的双向绑定-9

上一节中，我们是从父组件给子组件传送数据，要实现事件与数据的双向绑定，我们来看如何从子组件向父组件传送数据;

接触之前，我们看一些里面函数绑定的知识：

例：通过点击事件改变state的age属性值：

export default class ComponentFooter extends React.Component{
    constructor(){
        super();
        this.state = {
            username:"azedada",
            age:24
        }
    }

    //事件函数 改变state的age
    changeAge(){
        this.setState({age:18})
    }

    render(){
        return(
                <div>
                    <h1>这里是底部</h1>
                    <p>{this.state.username}:{this.state.age},{this.props.userId}</p> 
                    {/*这里写点击事件，注意写法是es6*/}
                    <input type="button" value="点击改变年龄" onClick={this.changeAge.bind(this)}/>
                </div>
            )
    }
    //运行结果 24变为18
}

接下来，我们看如何从子组件向父组件传送数据，

建立一个BodyIndex的子组件：bodychild，现在做的是在子组件bodychild更改的内容立马反馈更新到BodyIndex;

例：这个子页面是bodychild.js

import React from 'react';

export default class BodyChild extends React.Component{
    render(){
        return(
                <div>
                    {/*子页面向父页面传递参数，只能通过事件的形式，调用父页面props传过来的参数，这个参数是一个事件函数
                    我们在父页面定义这个函数，并且接收原生函数定义好的event这个参数*/}
                    <p>子页面输出：<input type='text' onChange={this.props.changeUsername}/></p>
                </div>
            )
    }
}

重点：子页面向父页面传递参数，只能通过事件的形式，调用父页面props传过来的参数，这个参数是一个事件函数；我们在父页面定义这个函数，并且接收原生函数定义好的event这个参数；

下面是父页面BodyIndex.js

import React from 'react';
import ReactDOM from 'react-dom';
//将子页面bodychild引用进来 
import BodyChild from './bodychild.js';

export default class BodyIndex extends React.Component{
    constructor(){
        super();
        this.state = {username : "azedada"} 

    }

    //定义事件函数，通过子页面bodychild对username的改变，将显示出来的username改变;
    changeUsername(event){
        this.setState({username:event.target.value})
    }

    render(){
        return(
                <div>
                    <h1>这里是主体容部分</h1>
                    {/*显示主页面的username的值*/}
                    <p>username：{this.state.username}</p>
                    {/*下面是子页面组件，在这里输入内容，将改变username的值*/}
                    <BodyChild changeUsername={this.changeUsername.bind(this)}/>
                </div>
            )
    }    
}

以上就是子组件向父组件传送数据;

 

扩展:在子组件可以向父组件传送数据的时候，父组件通过点击事件，实现将这个数据改为定值，如何操作：

添加点击事件，进行传参即可：

import React from 'react';
import ReactDOM from 'react-dom';
//将子页面bodychild引用进来 
import BodyChild from './bodychild.js';

export default class BodyIndex extends React.Component{
    constructor(){
        super();
        this.state = {username : "azedada"} 

    }
    //父组件点击事件
    recover(str){
        this.setState({username:str})
    }


    //定义子组件事件函数，通过子页面bodychild对username的改变，将显示出来的username改变;
    changeUsername(event){
        this.setState({username:event.target.value})
    }

    render(){
        return(
                <div>
                    <h1>这里是主体容部分</h1>
                    {/*显示主页面的username的值*/}
                    <p>username：{this.state.username}</p>
                    {/*下面是子页面组件，在这里输入内容，将改变username的值*/}
                    <BodyChild changeUsername={this.changeUsername.bind(this)}/>
                    {/*点击将username变为"azedada",在bind()进行传参*/}
                    <input type="button" value="点击恢复" onClick={this.recover.bind(this,"azedada")}/>
                </div>
            )
    }    
}