这篇文章主要介绍“React组件里this指向了undefined的原理是什么”，在日常操作中，相信很多人在React组件里this指向了undefined的原理是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”React组件里this指向了undefined的原理是什么”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
我的React组件里为什么this指向了undefined？
一.首先先唠一唠react事件中方法加不加()的问题
在原生js中我们绑定事件的时候是这样子的，绑定的方法点击的时候没有加()这个时候控制台是没有反应的，也就是说，事件没有被触发。
<button onclick="demo">点击触发</button>
<script>
function demo () {
console.log("点击了这个事件")
}
</script>
当加上()后点击就正常触发执行了，这是js触发事件的规则。
<button onclick="demo()">点击触发</button>
<script>
function demo () {
console.log("点击了这个事件")
}
</script>
二.问题发生了
在我们写React的类组件的时候发现了一个问题，问题就是，正常触发事件的时候这个小括号就不用写了，但是如果写了，就算没有点击，也会触发这个事件，因为在react的jsx语法中，从{}开始就相当于js表达式开始了，在js表达式中加了()相当于是调用函数了，不加是当我们点击的时候，让react为我们加上()
import React from "react"
//类组件
class Demos extends React.Component {
state = {
count: 0,
}
changeNum () {
console.log(this)
}
render () {
return (
<>
<div>{this.state.count}</div>
<button onClick={this.changeNum()}>点击修改数据</button>
</>
)
}
}
function App () {
return (
<div className="App">
<div>
<Demos></Demos>
</div>
</div>
)
}
export default App
但是问题接踵而至，我们去掉了小括号，但是此后this的指向变成了undefined，
三.自我反省
我怀疑可能是我js关于this指向的问题学的不太扎实
this指向：
事件绑定中指向绑定事件的元素
<body>
<button onclick="demo()">点击触发</button>
</body>
<script>
function demo () {
console.log("点击了这个事件", this)
}
</script>
也就是说当我们通过一个按钮去触发事件的时候，事件中的this指向的是window，所以我们对比着去理解也就明白了为什么React中指向的是undefined，因为React中指向的window，但是我们想让它指向的是当前的类组件的实例，所以babel严格模式下就指向了undefined。
构造函数中this指向类的实例。
call,apply,bind指向的是传入的第一个参数。
四.解决React中函数指向的问题
推荐使用 class field的方式
class Demos extends React.Component {
state = {
count: 0,
}
changeNum= ()=> {
console.log(this)
}
render () {
return (
<>
<div>{this.state.count}</div>
<button onClick={this.changeNum}>点击修改数据</button>
</>
)
}
}
到此，关于“React组件里this指向了undefined的原理是什么”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程之家网站，小编会继续努力为大家带来更多实用的文章！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
