es5的代码：
1
735 var React = require('react');
var MyComponent = React.createClass({
handleClick: function() {
React.findDOMNode(this.refs.myTextInput).focus();
},
render: function() {
return (
);
}
});
module.exports = React.createClass({
render: function() {
return (
);
}
});
es6的代码：
import React,{Component} from 'react';
class FocusText extends Component{
handleClick(){
React.findDOMNode(this.refs.myText).focus();
}
render(){
return(
);
}
}
class RepeatArray extends Component{
constructor() {
super();
}
render(){
return (
);
}
}
export default RepeatArray;
我的问题是：为什么es5写法中的onclick事件的处理函数不需要绑定this，但是es6写法中的onclick事件处理函数需要绑定this？es6写法中绑定前的this指向是什么？
其实经常看到react中使用的es6需要绑定this，有时候在constructor中绑定再用，其实为什么需要这样的？在constructor中绑定和像上面es6例子中那样绑定有什么差别？为什么es5写法中却不需要绑定呢？
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
因为用ES5的
createClass的写法，React会对里面的方法进行this绑定。而用ES6的
extends Component并不会进行this绑定。解决方法：
按照你说的，每个方法都进行
this.handleClick.bind(this)方法定义的时候，用箭头函数定义，ES6会给这个方法自动绑定
this这么调用也可以:
onClick={(e)=>{ this.handleClick(e) }}上面三种方法都可以在
handleClick中获取正确的this值