我们在给一个 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 中传递的事件不是一个字符串, 而是一个函数(如: onClick={this.handleClick}), 此时 onClick 即是中间变量, 所以处理函数中的 this 指向会丢失. 解决这个问题就是给调用函数时 bind(this), 从而使得无论事件处理函数如何传递, this 指向都是当前实例化对象.
解决
解决方案有 4 种
在 ES6 中可以在构造函数中, 直接将当前组件 (或者叫类) 的实例与函数绑定.
在方法调用的时候绑定 this 如:
<input type="file" ref="myinput" accept = "image/*" onChange = {this.selectFile.bind(this)} />
在方法编写结尾的时候绑定 this,bind(this) 如:
- submitHandler(){
- console.log(1)
- }.bind(this)
使用 es6 箭头函数
myfn = () =>{ console.log(this.refs.can) }
推荐使用箭头函数, 因为最近刚换到 react 来, 没怎么看就直接 cli 来怼, 遇到一些小问题记录于此
来源: https://juejin.im/post/5c80d552f265da2db414509c