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物件