React中this丟失的四種解決方法
發(fā)現(xiàn)問題
我們在給一個dom元素綁定方法的時候，例如：
<input type="text" ref="myinput" accept = "image/*" onChange = {this.selectFile} />
React組件中不能獲取refs的值，頁面報錯提示：Uncaught TypeError: Cannot read property 'refs' of null or undefind
小栗子
import React from 'react';
import $ from 'jquery'
import '../app.scss';
export default class MyForm extends React.Component {
submitHandler (event) {
event.preventDefault();
console.log(this.refs.helloTo);
var helloTo = this.refs.helloTo.value;
alert(helloTo);
}
render () {
return (
<form onSubmit={this.submitHandler}>
<input ref='helloTo' type='text' defaultValue='Hello World! ' />
<button type='submit'>Speak</button>
</form>
)
}
}
React中的bind同上方原理一致,在JSX中傳遞的事件不是一個字符串，而是一個函數(shù)（如:onClick={this.handleClick}），此時onClick即是中間變量，所以處理函數(shù)中的this指向會丟失。解決這個問題就是給調(diào)用函數(shù)時bind(this)，從而使得無論事件處理函數(shù)如何傳遞，this指向都是當前實例化對象。
解決
解決方案有4種
1、在ES6中可以在構(gòu)造函數(shù)中，直接將當前組件（或者叫類）的實例與函數(shù)綁定。
2、在方法調(diào)用的時候綁定this
如： <input type="file" ref="myinput" accept = "image/*" onChange = {this.selectFile.bind(this)} />
3、在方法編寫結(jié)尾的時候綁定this，bind（this）
如：
submitHandler（）{
console.log（1）
}.bind(this)
4、使用es6 箭頭函數(shù) myfn = () =>{ console.log(this.refs.can) }
推薦使用箭頭函數(shù)，因為最近剛換到react 來，沒怎么看就直接cli 來懟，遇到一些小問題記錄于此
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。
相關(guān)文章
Fiber可以理解為一個執(zhí)行單元，每次執(zhí)行完一個執(zhí)行單元，React?Fiber就會檢查還剩多少時間，如果沒有時間則將控制權(quán)讓出去，然后由瀏覽器執(zhí)行渲染操作，這篇文章主要介紹了React?Fiber架構(gòu)原理剖析,需要的朋友可以參考下<BR>2023-01-01
react中history(push,go,replace)切換路由方法的區(qū)別及說明
這篇文章主要介紹了react中history(push,go,replace)切換路由方法的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
React項目開發(fā)中函數(shù)組件與函數(shù)式編程關(guān)系
函數(shù)組件和函數(shù)式編程究竟是什么關(guān)系呢？本文會圍繞這個話題展開講解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
詳解React中父子組件數(shù)據(jù)傳遞和修改的方式及原理
這篇文章主要為大家詳細介紹了React中父子組件數(shù)據(jù)傳遞和修改的方式及原理,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-04-04
使用React+SpringBoot開發(fā)一個協(xié)同編輯的表格文檔實現(xiàn)步驟
隨著云計算和團隊協(xié)作的興起,協(xié)同編輯成為了許多企業(yè)和組織中必不可少的需求,本文小編就將為大家介紹如何使用React+SpringBoot簡單的開發(fā)一個協(xié)同編輯的表格文檔,感興趣的朋友一起看看吧2023-11-11
React創(chuàng)建組件的三種方式及其區(qū)別
本文主要介紹了React創(chuàng)建組件的三種方式及其區(qū)別，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
react路由基礎(chǔ)解讀(Router、Link和Route)
這篇文章主要介紹了react路由基礎(chǔ)解讀(Router、Link和Route)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要為大家詳細介紹了React實現(xiàn)分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
useContext是React提供的一個鉤子函數(shù),用于在函數(shù)組件中訪問和使用Context,useContext的實現(xiàn)原理涉及React內(nèi)部的機制,本文給大家介紹react中的useContext具體實現(xiàn),感興趣的朋友一起看看吧2023-11-11
Hook 是 React 16.8 的新增特性，本文主要介紹了10種Hook的使用，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11