React內三種函數的寫法

 以下提供三種React內函數的寫法，都可以正常運行，有疑問可以留言

 

寫法一：讓函數內部的this指向這個類的實例，它是用bind實現的，bind的第一個參數表示context，就是this。 

//寫法一
class ManageAddress extends React.Component {

    constructor(props) {
        super(props);
        this.handleChangeAddressType = this.handleChangeAddressType.bind(this)
        ...
    }

    /**
     * 切換地址類型，重新獲取地址列表
     * @param key
     */ handleChangeAddressType(key) { ... };

  render() {
        return (
            ...
            <button onClick={this.handleChangeAddressType}>測試
            </button >
           ...
        )
    }
}

 

寫法二：相當於讓handleChangeAddressType的值為一個箭頭函數，所以調用處直接傳入這個值就可以，注意不能加括號會報錯。而箭頭函數的特性我們都知道：它不會自己創建this，它會從自己的作用域鏈上層繼承this，這里this就會指向這個類的實例。這不是js標准寫法，但是babel已經支持了。

//寫法二
class ManageAddress extends React.Component {

    constructor(props) {
        super(props);
        ...
    }

    /**
     * 切換地址類型，重新獲取地址列表
     * @param key
     */ handleChangeAddressType = (key) =>{
     ...
    };

  render() {
        return (
            ...
            <button onClick={this.handleChangeAddressType}>測試
            </button >
           ...
        )
    }
}

 

寫法三：在調用處使用箭頭函數，與第二種方法類似

//寫法三
class ManageAddress extends React.Component {

    constructor(props) {
        super(props);
        ...
    }

    /**
     * 切換地址類型，重新獲取地址列表
     * @param key
     */
    handleChangeAddressType(key) {
     ...
    };

  render() {
        return (
            ...
            <button onClick={(key)=>this.handleChangeAddressType(key)}>測試
            </button >
           ...
        )
    }
}