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指向都是當(dāng)前實例化對象。
解決
解決方案有4種
1、在ES6中可以在構(gòu)造函數(shù)中，直接將當(dāng)前組件（或者叫類）的實例與函數(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)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。
相關(guān)文章
windows下create-react-app 升級至3.3.1版本踩坑記
這篇文章主要介紹了windows下create-react-app 升級至3.3.1版本踩坑記，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
React視頻播放控制組件Video Controls的實現(xiàn)
本文主要介紹了React視頻播放控制組件Video Controls的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-02-02
React報錯之Object?is?possibly?null的問題及解決方法
這篇文章主要介紹了React報錯之Object?is?possibly?null的問題,造成 "Object is possibly null"的錯誤是因為useRef()鉤子可以傳遞一個初始值作為參數(shù)，而我們傳遞null作為初始值，本文給大家分享詳細解決方法，需要的朋友可以參考下2022-07-07
Hooks?發(fā)布之后，函數(shù)組件能擁有自己的?state，React提供了很多內(nèi)置的Hooks，這篇文章就來和大家介紹一下useState?和?useEffect的使用，需要的可以參考一下2023-06-06
這篇文章主要介紹了淺談React Event實現(xiàn)原理,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
使用Electron構(gòu)建React+Webpack桌面應(yīng)用的方法
本篇文章主要介紹了使用Electron構(gòu)建React+Webpack桌面應(yīng)用的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
本文主要介紹了React 三大核心屬性，主要包括State屬性，Props屬性，Refs屬性，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
React項目打包發(fā)布到Tomcat頁面空白問題及解決
這篇文章主要介紹了React項目打包發(fā)布到Tomcat頁面空白問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
forwardRef 相當(dāng)于是為 ref 傳遞的一種方式,普通的函數(shù)式組件就是 Render,而 fowardRef 多加了 Ref 參數(shù),這篇文章主要介紹了React 中的 ForwardRef的使用示例詳解,需要的朋友可以參考下2024-06-06
redux的核心概念其實很簡單：將需要修改的state都存入到store里，發(fā)起一個action用來描述發(fā)生了什么，用reducers描述action如何改變state tree，這篇文章主要介紹了Redux thunk中間件及執(zhí)行原理分析2022-09-09