React可以使用React.createClass、ES6 classes、純函數3種方式構建組件。使用React.createClass會自動綁定每個方法的this到當前組件，但使用ES6 classes或純函數時，就要靠手動綁定this了。

bind(this)

Function.prototype.bind(thisArg [, arg1 [, arg2, …]]) 是ES5新增的函數擴展方法，bind()返回一個新的函數對象，該函數的this被綁定到thisArg上，并向事件處理器中傳入參數

import React, {Component} from 'react' class Greeter extends Component{constructor (props) {super(props)this.state = {count: 0}}add (v) {this.setState({count:this.state.count+v})}render () {return (<div><button onClick={this.add.bind(this,3)}>add</button></div>)} }

構造函數內綁定

在構造函數 constructor 內綁定this，好處是僅需要綁定一次，避免每次渲染時都要重新綁定，函數在別處復用時也無需再次綁定

import React, {Component} from 'react' class Greeter extends Component{constructor (props) {super(props)this.state = {count: 0}this.add=this.add.bind(this)}add () {this.setState({count:this.state.count+1})}render () {return (<div><button onClick={this.add}>add</button></div>)} }

箭頭函數

箭頭函數則會捕獲其所在上下文的this值，作為自己的this值

1:

import React, {Component} from 'react' class Greeter extends Component{constructor (props) {super(props)this.state = {count: 0}}add () {this.setState({count:this.state.count+1})}render () {return (<div><button onClick={()=>{this.add()}}>add</button></div>)} }

2:

在Classes中直接賦值是ES7的寫法，ES6并不支持,需要安裝npm install --save-dev babel-preset-stage-2

//.babelrc"presets":["react","env","stage-2"] import React, {Component} from 'react' class Greeter extends Component{constructor (props) {super(props)this.state = {count: 0}}add=()=>{this.setState({count:this.state.count+1})}render () {return (<div><button onClick={this.add}>add</button></div>)} }

3：只用es6

import React, {Component} from 'react' class Greeter extends Component{constructor (props) {super(props)this.state = {count: 0}this.add=()=>{this.setState({count:this.state.count+1})}}render () {return (<div><button onClick={this.add}>add</button></div>)} }

總結

以上是生活随笔為你收集整理的React ES6组件里绑定this的三种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。