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;

React事件方法、React定義方法的幾種方式、獲取數據、改變數據、執行方法傳值