1. 程式人生 > >React之函式中的this指向

React之函式中的this指向

       我們都知道在React中使用函式時,有兩種寫法,一是回撥函式,二是直接呼叫,但需要在建構函式中繫結this,只有這樣,函式中的this才指向本元件

       總結一下沒有繫結this的函式中的this指向

        不管是在本元件的元素上呼叫的函式還是傳遞給子元件的函式,不管有沒有繫結this,它們呼叫的都是本元件裡的函式,即呼叫函式的this指向的是本元件

         例如: class Parent extends React.Component {

            constructor(props) { supper(props); }

             handleSubmit() {}

              render() {

                  return (

                     <div>

                         <button onClick={this.handleSubmit}>點選按鈕</button>

                         <Child  onFunc={this.handleSubmit} />

                     </div>

                  );

              }

         }

        <button>與<Child />呼叫的都是Parent元件中的handleSubmit,不同的是handleSubmit函式中的this指向

        <button>的handleSubmit中的this為undefined

        <Child />的handleSubmit中的this指向Child元件的propTypes物件