zoukankan      html  css  js  c++  java
  • 事件与数据的双向绑定

    事件与数据的双向绑定

    bodyIndex.js代码
    import React from 'react';
    import BodyChild from './bodychild'
    export default class BodyIndex extends React.Component {
    constructor() {
    super(); //调用基类的所有的初始化方法
    this.state = {
    username: "Parry",
    age:20
    };//初始化赋值
    }

    handleChildValueChange(event){
    this.setState({age:event.target.value});//取出子页面的值
    }

    changeUserInfo(){
    this.setState({age:50});
    };

    render() {
    return (
    div>
    h2>页面主题内容/h2>
    p>{this.state.username} {this.state.age} {this.props.userid} {this.props.username}</p
    p>age: {this.state.age}</p
    input type="button" value="提交" onClick={this.changeUserInfo.bind(this)}/>
    BodyChild handleChildValueChange={this.handleChildValueChange.bind(this)}/>
    </div
    )
    }
    }
    bodychild.js代码
    import React from 'react';
    export default class BodyChild extends React.Component{

    render() {
    return(
    div>
    p>子页面输入:input type="text" onChange={this.props.handleChildValueChange}/></p
    </div
    )
    }
    }
    通过在子页面BodyChild设置props,子页面value改变调用handleChildValueChange,传值到父页面bodyIndex。也就是说在子页面中通过调用父页面传递过来的事件props进行组件间的参数传递。
    思考(onChange与onBlur)的对比。
    ES6的语法注意
    函数绑定方法this :this.forceUpdateHander = this.forceUpdateHander.bind(this)
    或者调用时绑定:onClick={this.changeUserInfo.bind(this,50)}

  • 相关阅读:
    ABP理论学习之Swagger UI集成
    最佳加法表达式
    洛谷 P1736 创意吃鱼法
    洛谷P1387 最大正方形
    1078 最小生成树
    判断元素是否存在
    1531 山峰 【栈的应用】
    洛谷 P2335 [SDOI2005]位图
    矿藏估价
    二分法小结
  • 原文地址:https://www.cnblogs.com/ArielChen/p/7467592.html
Copyright © 2011-2022 走看看