溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“React組件綁定this的方式有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“React組件綁定this的方式有哪些”吧!
用react進行開發組件時，我們需要關注一下組件內部方法this的指向，react定義組件的方式有兩種，一種為函數組件，一種為類組件，類組件內部可以定義一些方法，這些方法的this需要綁定到組件實例上，小編這里總結了一下，一共有四種方案：
第一種方案，在構造函數內部使用bind綁定this，這樣做的好處是，避免每次渲染時都要重新綁定，代碼如下：
import React, {Component} from 'react'class Test extends React.Component {constructor (props) {super(props)this.state = {message: 'Allo!'}this.handleClick = this.handleClick.bind(this)}handleClick (e) {console.log(this.state.message)}render () {return (<div><button onClick={ this.handleClick }>Say Hello</button></div>)}}
第二種方案同樣是用bind，但是這次不再構造函數內部使用，而是在render函數內綁定，但是這樣的話，每次渲染都需要重新綁定，代碼如下：
import React, {Component} from 'react'class Test extends React.Component {constructor (props) {super(props)this.state = {message: 'Allo!'}}handleClick (name, e) {console.log(this.state.message + name)}render () {return (<div><button onClick={ this.handleClick.bind(this, '趙四') }>Say Hello</button></div>)}}
第三種方案是在render函數中，調用方法的位置包裹一層箭頭函數，因為箭頭函數的this指向箭頭函數定義的時候其所處作用域的this，而箭頭函數在render函數中定義，render函數this始終指向組件實例，所以箭頭函數的this也指向組件實例，代碼如下：
class Test extends React.Component {constructor (props) {super(props)this.state = {message: 'Allo!'}}handleClick (e) {console.log(this.state.message)}render () {return (<div><button onClick={ ()=>{ this.handleClick() } }>Say Hello</button></div>)}
以上這種方式有個小問題，因為箭頭函數總是匿名的，如果你打算移除監聽事件，是做不到的，那么怎么做才可以移除呢？看下一種方案。
第四種方案，代碼如下：
class Test extends React.Component { constructor (props) { super(props) this.state = {message: 'Allo!'} } handleClick = (e) => { console.log(this.state.message) } render () { return ( <div> <button onClick={ this.handleClick }>Say Hello</button> </div> ) }}
不過，在Classes中直接賦值是ES7的寫法，ES6并不支持，你有兩種選擇，一種是配置你的開發環境支持ES7，一種使采用如下方式，下面這種方式是第四種方案的另外一種寫法，代碼如下：
class Test extends React.Component {constructor (props) {super(props)this.state = {message: 'Allo!'}this.handleClick = (e) => {console.log(this.state.message)}}render () {return (<div><button onClick={ this.handleClick }>Say Hello</button></div>)}
以上便是react組件內部方法this綁定的四種方案，如果還有其它方案歡迎留言。
資料引用：
https://blog.csdn.net/sinat_17775997/article/details/56839485
到此，相信大家對“React組件綁定this的方式有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
