react事件中的this指向
阿新 • • 發佈:2018-12-12
在react中繫結事件處理函式的this指向一共有三種方法,本次主要總結這三種方式。
專案建立
關於專案的建立方法,在之前的文章中有記錄,這裡不再贅述,專案建立成功後,按照之前的目錄結構對生成的專案進行調整,新建一個Home.js元件,並在App.js中引入該元件。
Home.js
import React from 'react'; class Home extends React.Component{ constructor(props){ super(props); this.state={ msg:'我是Home元件' } } render(){ return(<div> <h3>{this.state.msg}</h3> </div> ) } } export default Home;
App.js
import React, { Component } from 'react'; import './assets/css/App.css'; import Home from './components/Home' class App extends Component { render() { return (<div className="App"> 這裡是根元件 <br/> <Home /> </div> ); } } export default App;
基本事件方法
首先以點選事件為例,需要有觸發事件的點選按鈕,需要有事件執行方法,具體寫法如下:
當我們點選按鈕的時候就會執行上面的run方法,需要注意的是,run方法結束後是不帶符號的。
事件中獲取資料
按照上面的寫法,當我們需要在方法中使用資料的時候,最先想到的就是下面這種寫法了:
可結果並不是我們預期的順利,此時因為this的指向出現問題而報錯了,因為我們預期的this是當前元件,而不是當前執行的方法。
所以,此時需要改變this的指向,常見有下面三種方法:
方法一:通過bind來指明當前方法中的this指向當前Home.js元件
方法二:在建構函式constructor中改變this指向。
方法三:使用箭頭函式改變this指向。
事件中改變資料
在獲取資料的時候需要處理this指向,自然在改變資料的時候也需要處理this指向問題,所以改變資料也對應有三種方法。
Home.js
import React from 'react'; class Home extends React.Component{ constructor(props){ super(props); this.state={ msg:'我是Home元件的資料一', text:'我是Home元件的資料二', info:'我是Home元件的資料三', } this.change = this.change.bind(this); } run(){ this.setState({msg:'我是方法一'}) } change(){ this.setState({text:'我是方法二'}) } updata=()=>{ this.setState({info:'我是方法三'}) } render(){ return( <div> <h3>{this.state.msg}</h3> <h3>{this.state.text}</h3> <h3>{this.state.info}</h3> <button onClick={this.run.bind(this)}>改變資料1</button> <button onClick={this.change}>改變資料2</button> <button onClick={this.updata}>改變資料3</button> </div> ) } } export default Home;