React中this指向常用的2种修正方式
Posted llcdxh
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React中this指向常用的2种修正方式相关的知识，希望对你有一定的参考价值。
一、使用bind方法(构造函数内绑定)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三大属性之state使用</title> </head> <body> <div id="test1"></div> </body> <script src="./js/babel.min.js" charset="utf-8"></script> <script src="./js/react.development.js" charset="utf-8"></script> <script src="./js/react-dom.development.js" charset="utf-8"></script> <script type="text/babel"> // 1.创建虚拟DOM class Like extends React.Component { constructor(props) { super(props); this.state = { isLike: false }; // 自定义函数中的this默认指向undefined，所以需要修改this的指向 this.handleClick = this.handleClick.bind(this); } render(){ const {isLike} = this.state; return <h2 onClick={this.handleClick}>{isLike ? ‘他喜欢我‘ : ‘他不喜欢我‘}</h2>; } handleClick(){ // 获取状态 // console.log(this); // undefined const isLike = !this.state.isLike; // 修改状态 this.setState({ isLike }) } } // 2.渲染 ReactDOM.render(<Like/>, document.getElementById("test1")); </script> </html>
也可以onClick={this.handleClick.bind(this)};这种方法简洁明了，但由于 function函数 在每个render上重新分配，所以有性能影响。
二、使用箭头函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三大属性之state使用</title>
</head>
<body>
<div id="test1"></div>
</body>
<script src="./js/babel.min.js" charset="utf-8"></script>
<script src="./js/react.development.js" charset="utf-8"></script>
<script src="./js/react-dom.development.js" charset="utf-8"></script>
<script type="text/babel">
// 1.创建虚拟DOM
class Like extends React.Component {
constructor(props) {
super(props);
this.state = {
isLike: false
};
// 自定义函数中的this默认指向undefined，所以需要修改this的指向
// 1.bind 2.箭头函数 3.
// this.handleClick = this.handleClick.bind(this);
}
render(){
const {isLike} = this.state;
return <h2 onClick={this.handleClick}>{isLike ? ‘他喜欢我‘ : ‘他不喜欢我‘}</h2>;
}
// 箭头函数修正this指向
handleClick = () => {
// 获取状态
// console.log(this); // undefined
const isLike = !this.state.isLike;
// 修改状态
this.setState({
isLike
})
}
}
// 2.渲染
ReactDOM.render(<Like/>, document.getElementById("test1"));
</script>
</html>
以上是关于React中this指向常用的2种修正方式的主要内容，如果未能解决你的问题，请参考以下文章