React事件方法React定义方法的几种方式获取数据改变数据执行方法传值

Posted 2021-02-10 ywjfx

1、案例实现代码如下

import React, { Component } from ‘react‘;

/**
 * 特别注意this，对于传值和绑定都十分重要
 */
class Home4 extends Component{
    constructor(props){
        super(props);
        //定义数据
        this.state={
            msg:‘这是一个Home4组件‘,
            name:"杨杰"
        }
        this.getMessage = this.getMessage.bind(this);
    }

    run(){
        alert("这是一个run方法");
    }

    getData(){
        alert(this.state.msg);
    }

    //改变state值
    setData=()=>{

        this.setState({
            msg:"改变msg的值"
        })
    }
    getMessage(){
        alert(this.state.msg);
    }
    //箭头函数
    getName=()=>{
        alert(this.state.name);
    }
    setName=(str)=>{
        this.setState({
            name:str
        })
    }
    render() {
        return(
            <div>
                Home4 index 事件方法
                <br/>
                方法:{this.state.name}
                <br/>
                <button onClick={this.run}>执行方法,通过this.方法名</button>
                <br/>
                <p>方式1：通过this.方法名.bind(this)将this对象传递给getData()方法体内的this对象</p>
                <button onClick={this.getData.bind(this)}>执行方法1</button>
                <br/>
                <p>方式2：在构造函数，通过this.getMessage = this.getMessage.bind(this)这种方式赋值</p>
                <button onClick={this.getMessage}>执行方法2</button>
                <br/>
                <p>方式3：在构造函数，通过this.getMessage = this.getMessage.bind(this)这种方式赋值</p>
                <button onClick={this.getName}>执行方法3</button>

                <br/>
                <button onClick={this.setData}>改变state中的值</button>

                <br/>
                <button onClick={this.setName.bind(this,"zhangsan")}>执行方法传值</button>

            </div>
        )
    }
}
export default Home4;