React綁定事件，處理函數this的幾種方法

本文分三種方法，

第一種方法：（推薦）

 getData =() => {
        alert(this.state.name)
   }
   
<button onClick = {this.getData}>獲取數據方法1</button>

第二種方法

getDataone(){
         alert(this.state.name)
   }
 
 <button onClick = {this.getDataone.bind(this)}>獲取數據方法2</button>

第三種方法

// 構造函數
 constructor(props){
        super(props);
        this.state = {
            name:'剛哥',
            message:'你是不是想我在太陽下低頭!'
        }
        // 改變this指向的方法
        this.getDatathree = this.getDatathree.bind(this)
   }

 getDatathree(){
       alert(this.state.message)
    }
 
 <button onClick = {this.getDatathree}>獲取數據方法3</button>

改變綁定數據1

// 改變綁定數據  點擊把剛哥改變爲邱志剛菜雞
 constructor(props){
        super(props);

        this.state = {
            name:'剛哥',
        }
   }
   
  setData=() => {
        this.setState({
           name:'邱志剛菜雞!' 
        })
    }
 <button onClick = {this.setData}>改變數據</button>

改變綁定數據2
// 執行方法傳值

 // 執行方法
    setName =(str,cty) => {
        this.setState({
                username:str,
                name:cty
        })
    }
<button onClick = {this.setName.bind(this,'張三','利息')}>執行方法傳值</button>

整體案例

import React, {Component} from 'react';
// import { strict } from 'assert';

class Home extends Component{
// 構造函數，存數據
   constructor(props){
        super(props);

        this.state = {
            name:'剛哥',
            message:'你是不是想我在太陽下低頭!',
            username:'社會人'
        }
        // 改變this指向的方法
        this.getDatathree = this.getDatathree.bind(this)
   }
   run(){
       alert(12121)
   }
   getData =() => {
        alert(this.state.name)
   }
   getDataone(){
         alert(this.state.name)
   }
   getDatathree(){
       alert(this.state.message)
    }

    // 改變綁定數據
    setData=() => {
        this.setState({
           name:'邱志剛菜雞!' 
        })
    }
    // 執行方法
    setName =(str,cty) => {
        this.setState({
                username:str,
                name:cy
        })
    }

   render(){
   
    return(
        <div>
             <h2>你好, 我是你的Home組件 </h2>
             <p>姓名: {this.state.name}</p>
             <h4>{this.state.username}</h4>
             <button onClick = {this.run}>點擊一下</button>
             <br/>
             <br/>
             <button onClick = {this.getData}>獲取數據方法1</button>
             <br/>
             <br/>
             <button onClick = {this.getDataone.bind(this)}>獲取數據方法2</button>
             <br/>
             <br/>
             <button onClick = {this.getDatathree}>獲取數據方法3</button>

             <br/>
             <br/>
             <button onClick = {this.setData}>獲取數據方法3</button>
             <br/>
             <br/>
             <button onClick = {this.setName.bind(this,'張三','利息')}>執行方法傳值</button>
        </div>
    )
   }
}

export default Home;

如果有問題，可以加我微信一起討論，我們一起進步！
屏幕前的你，加油！