React中this丟失的解決方法
摘要：
<input type="text" ref="myinput" accept = "image/*" onChange = {this.selectFile} />
小栗子
import React from 'r...
<input type="text" ref="myinput" accept = "image/*" onChange = {this.selectFile} />
小栗子
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中傳遞的事件不是一個字串，而是一個函式（如:onClick={this.handleClick}），此時onClick即是中間變數，所以處理函式中的this指向會丟失。解決這個問題就是給呼叫函式時bind(this)，從而使得無論事件處理函式如何傳遞，this指向都是當前例項化物件。
解決
- 解決方案有4種
<input type="file" ref="myinput" accept = "image/*" onChange = {this.selectFile.bind(this)} />
submitHandler（）{
console.log（1）
}.bind(this)
複製程式碼
-
使用es6 箭頭函式
myfn = () =>{ console.log(this.refs.can) }
推薦使用箭頭函式，因為最近剛換到react 來，沒怎麼看就直接cli 來懟，遇到一些小問題記錄於此