react-綁定this並傳參的三種方式

綁定this並傳參的三種方式

1. 在事件中綁定this並傳參：

    <input type="button" value="在事件中綁定this並傳參" onClick={this.handleMsg1.bind(this, '🍕', '🍟')} />

    // 在事件中綁定this並傳參
    handleMsg1(arg1, arg2) {
        console.log(this);
        // 此時this是個null
        this.setState({
            msg: '在事件中綁定this並傳參：' + arg1 + arg2
        });
    }

2. 在構造函數中綁定this並傳參:

    // 修改構造函數中的代碼：
    this.handleMsg2 = this.handleMsg2.bind(this, '🚗', '🚚');

    <input type="button" value="在構造函數中綁定this並傳參" onClick={this.handleMsg2} />

    // 在構造函數中綁定this並傳參
    handleMsg2(arg1, arg2) {
        this.setState({
            msg: '在構造函數中綁定this並傳參：' + arg1 + arg2
        });
    }

3. 用箭頭函數綁定this並傳參：

    <input type="button" value="用箭頭函數綁定this並傳參" onClick={() => { this.handleMsg3('👩', '👰') }} />

    // 用箭頭函數綁定this並傳參
        handleMsg3(arg1, arg2) {
            this.setState({
                msg: '用箭頭函數綁定this並傳參：' + arg1 + arg2
            });
        }

綁定文本框與state中的值

1. 在Vue.js中，默認可以通過v-model指令，將表單控件和我們的data上面的屬性進行雙向數據綁定，數據變化和頁面之間的變化是同步的！
2. 在React.js中，默認沒有提供雙向數據綁定這一功能，默認的，只能把state之上的數據同步到界面的控件上，但是不能默認實現把界面上數據的改變，同步到state之上，需要程序員手動調用相關的事件，來進行逆向的數據傳輸！
3. 綁定文本框和state的值：

    {/*只要將value屬性，和state上的狀態進行綁定，那么，這個表單元素就變成了受控表單元素，這時候，如果沒有調用相關的事件，是無法手動修改表單元素中的值的*/}
    <input style={{ width: '100%' }} ref="txt" type="text" value={this.state.msg} onChange={this.handleTextChange} />

    // 這是文本框內容改變時候的處理函數
    handleTextChange = () => {
        this.setState({
            msg: this.refs.txt.value
        });
    }

4. 注意setState的一個問題：

// 保存最新的state狀態值，在保存的時候，是異步地進行保存的，所以，如果想要獲取最新的，剛剛保存的那個狀態，需要通過回掉函數的形式去獲取最新state
this.setState({
    msg: this.refs.txt.value
    // msg: e.target.value
}, function () {
    // 獲取最新的state狀態值
    console.log(this.state.msg);
});

this問題和文本框

import React from 'react'

export default class BindThis extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      msg: '這是默認的msg'
    }

    // 綁定 this 並傳參的方式2: 在構造函數中綁定並傳參
    // 注意，當為一個函數，調用 bind 改變了this指向后，bind 函數調用的結果，有一個返回值，這個值，就是被改變this指向后的函數的引用；
    // 注意： bind 不會修改 原函數的 this 指向
    this.changeMsg2 = this.changeMsg2.bind(this, '🚗', '👫')
  }

  render() {
    return <div>
      <h1>綁定This並傳參的幾種方式</h1>

      {/* bind 的作用： 為前面的函數，修改函數內部的 this 指向，讓 函數內部的this，指向 bind 參數列表中的 第一個參數 */}
      {/* bind 和 call/apply 之間的區別： */}
      {/*  call/apply 修改完this指向后，會立即調用前面的函數，但是 bind 只是修改this指向，並不會調用 */}
      {/* 注意： bind 中的第一個參數，是用來修改 this 指向的，第一個參數后面的所有參數，都會當作將來調用 前面函數 時候的參數傳遞進去 */}
      {/* 方式1：在 事件處理函數中，直接使用 bind 綁定 this 並傳參 */}
      <input type="button" value="綁定this並傳參的方式1" onClick={this.changeMsg1.bind(this, '🐷', '🍕')} />
      <input type="button" value="綁定this並傳參的方式2" onClick={this.changeMsg2} />
      {/* <input type="button" value="綁定this並傳參的方式3" onClick={() => { this.changeMsg3('😊', '😘') }} /> */}
      <input type="button" value="綁定this並傳參的方式3" onClick={() => { this.changeMsg3('😊', '😘') }} />

      <hr />

      <h3>{this.state.msg}</h3>

      {/* 在 Vue 中，有 v-model 指令來實現雙向數據綁定，但是，在 React 中， 根本沒有指令的概念，因此React 默認也不支持 雙向數據綁定 */}
      {/* React 只支持，把數據從 state 上傳輸到 頁面，但是，無法自動實現數據從 頁面 傳輸到 state 中 進行保存，也就是，React 不支持數據的自動逆向傳輸， 只是實現了數據的單向綁定 */}
      {/* 注意：如果為 表單元素，提供了 value 屬性綁定，那么，必須同時為 表單元素 綁定 readOnly, 或者提供要給 onChange 事件 */}
      {/* 如果提供了readOnly，表示這個元素只讀的不能被修改  */}
      {/* 如果提供了onChange 表示，這個元素的值可以被修改，但是，要自己定義修改的邏輯  */}
      <input type="text" style={{ width: '100%' }} value={this.state.msg} onChange={this.txtChanged} ref="txt" />
    </div>
  }

  // 為 文本框 綁定 txtChanged 事件
  txtChanged = (e) => {
    // console.log('ok');
    // 如果想讓 文本框在觸發 onChange 的時候，同時把文本框最新的值，保存到 state 中，那么，我們需要手動調用 this.setState

    // 獲取文本框中 最新文本的3種方式：
    //  1. 使用 document.getElementById 來拿
    //  2. 使用 ref 來拿
    // console.log(this.refs.txt.value);
    //  3. 使用 事件對象的 參數 e 來拿   e.target 就表示觸發 這個事件的 事件源對象，得到的是一個原生的JS DOM 對象
    // console.log(e.target.value);
    this.setState({
      msg: e.target.value
    })
  }

  changeMsg1(arg1, arg2) {
    // 注意：這里的方式，是一個普通方法，因此，在觸發的時候，這里的 this 是 undefined
    // console.log(this);
    this.setState({
      msg: '綁定this並傳參的方式1' + arg1 + arg2
    })
  }

  changeMsg2(arg1, arg2) {
    // console.log(this);
    // 注意：這里的方式，是一個普通方法，因此，在觸發的時候，這里的 this 是 undefined
    this.setState({
      msg: '綁定this並傳參的方式2' + arg1 + arg2
    })
  }

  changeMsg3 = (arg1, arg2) => {
    // console.log(this);
    // 注意：這里的方式，是一個普通方法，因此，在觸發的時候，這里的 this 是 undefined
    this.setState({
      msg: '綁定this並傳參的方式3' + arg1 + arg2
    })
  }

}