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