react事件绑定,事件传参,input单向数据绑定

时间:2023-03-10 03:49:49
react事件绑定,事件传参,input单向数据绑定
import React, { Component } from 'react';
class New extends Component {
    constructor(props){
        super(props)
        this.state={
            Name:'王一'
        }
    }

show(){
    console.log('在onClick中不需要加小括号');
}
passValue(arg1){
    console.log('传参时必须使用箭头函数,该方法传递的参数是'+arg1);
}
changeState=()=>{
    this.setState({
        Name:'赵二'
    }, function(){
        console.log('利用回调函数取的值  '+this.state.Name);
    })
    console.log('绑定的事件方法必须使用箭头函数的形式,同时必须加上this.state,由于使用了setState,它会慢一步显示,第二次点击时候值才会发生改变! 姓名'+this.state.Name);
}
    render(){
        return<div>
            <h3>第二次练习</h3>
            <button onClick={this.show}>事件的绑定</button>
            <button onClick={()=>this.passValue("1")}>事件的传参</button>
            <input type='text' style={{width:'60%',height:'50%'}} value={this.state.Name} />
            <button onClick={()=>this.changeState()}>数据的双向传递</button>
        </div>
    }
}
export default New;