react里面的this_React 中 this指向问题
在写react mobx的demo时,给checkbox 添加一个onChange事件,并且忘记在constructor中bind事件,导致this指向错误
import React from 'react'
import { observer } from 'mobx-react'
@observer
class Todo extends React.Component {
constructor(props){
super(props);
// this.toggleFinished = this.toggleFinished.bind(this)
// this.removeTodo = this.removeTodo.bind(this)
}
toggleFinished() {
console.log(this) // undefined,因为并没有绑定this
const todo = this.props.todo;
todo.finished = !todo.finished
}
removeTodo = () => {
const i = this.props.i;
// const AppState = this.props.AppState;
this.props.AppState.todoList.splice(i,1)
}
render(){
const todo = this.props.todo;
return (
id:{todo.id},task:{todo.task},finished:{todo.finished?'true':'false'}
remove it
)
}
}
export default Todo
image.png
报错原因: this并没有绑定到Todo上
官方文档React处理事件中这么解释:在JSX回调中你必须注意 this 的指向。 在 JavaScript 中,类方法默认没有 绑定 的。如果你忘记绑定 this.handleClick 并将其传递给onClick,那么在直接调用该函数时,this 会是 undefined 。
解决方法:
1.在constructor中绑定this
constructor(props){
super(props);
this.toggleFinished = this.toggleFinished.bind(this) // 将this绑定到当前对象
// this.removeTodo = this.removeTodo.bind(this)
}
2.使用箭头函数 ()=>
toggleFinished =() =>{
console.log(this) // Todo...
// const todo = this.props.todo;
// todo.finished = !todo.finished
}
箭头函数() this指向
MDN解释:在箭头函数中,this与封闭词法上下文的this保持一致。在全局代码中,它将被设置为全局对象。
在本章中,也就是this指向外层调用者 Todo
react里面的this_React 中 this指向问题相关推荐
- react里面的this_React 为啥要绑定this
onClick={this.fn.bind(this)} 在react中我们总是看到事件后面跟着一个.bind(this),也就是绑定this,如果你尝试不写绑定,那react就会报错Cannot r ...
- css里面的after_CSS中的after
CSS中存在一些比较特殊的属性,称之为伪类,它们之中最常用的就是定义链接的伪:link,:visited,:hover,:active等. 除了它们,还有一些不被常使用的伪类,有:focus,:fir ...
- css里面的after_css中:after和:before的作用及使用方法
本章给大家介绍css中:after和:before的作用及使用方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1. :before 和 :after 的主要作用是在元素内容前后加 ...
- 获取table里面的td中的值
$("#trId").children("td").eq(0).text(); //当前行的第一个<td>的值 <td>下标 ...
- JavaScript面向对象(一)——JS OOP基础与JS 中This指向详解
前 言 学过程序语言的都知道,我们的程序语言进化是从"面向机器".到"面向过程".再到"面向对象"一步步的发展而来.类似于汇编语言这样的面 ...
- File 里面的flush()和close()
前天项目组遇到文件上传,对内存加大的问题.特意看了看相关知识,也对这个有一定的了解 try {FileInputStream fis=new FileInputStream(new File(&quo ...
- js中json法创建对象(json里面的:相当于js里面的=)
js中json法创建对象(json里面的:相当于js里面的=) 一.总结 json里面的:相当于js里面的= 4.json创建js对象解决命名冲突:多个人为同一个页面写js的话,命名冲突就有可能发生, ...
- 前端学习(2485):vue里面的this指向
一.普通函数中的this 这是vue文档里的原话: All lifecycle hooks are called with their 'this' context pointing to the V ...
- html 中 标签里面的id 和 name 有什么区别?
html 中 标签里面的id 和 name 有什么区别? id与name的作用,作为标签的标识符,基本上是一样的.name是老方法,id是在name基础上发明的,后来才有的. 一般来说,js中使用ID ...
最新文章
- Python高级特性——切片(Slice)
- Android车载开发总结
- Python 闭包详解
- 点击事件加不上,换个位置调用
- 随便写写的正则表达式
- 四层负载均衡与七层负载均衡
- ArcGIS AO中控制图层中要素可见状态的总结
- 飞机大战--显示玩家飞机
- python3 装饰器_python3_装饰器_异常处理
- 吴恩达机器学习笔记十三之推荐系统
- 微信被曝大“Bug”?有用户账户资金被盗刷,这个功能要慎用
- log4j2 mysql_[简单]log4jdbc-log4j2配置简记
- 物联网监测之光纤振动传感器
- python热狗大战
- QListView超简单的更新列表
- php混淆解密,关于php混淆加密解密详解
- 以太网与工业以太网的区别
- PC端微信打不开小程序解决
- Android流媒体播放器介绍
- 米兔机器人第三代测评_米兔智能机器人——年轻人的第一台 31313?
热门文章
- AOP 在Spring 中的应用
- HDFS的API操作-获取FileSystem方式
- 多租户以及基于多租户的数据库设计需求
- ES6新特性之解构表达式
- 基本数据类型和包装类型
- jQuery课程介绍、Query的介绍、Query初次体验、jQuery再次体验、jQuery中的顶级对象
- css 首字下沉 错位,css+div错位问题的修复小结
- c语言 乱码转化为16进制_面向小白的C语言科普教程(一)文件和扩展名、编码和十六进制...
- JDBC、DriverManage、JNDI、数据源(DataSource)、连接池的区别
- 【面试】JAVA六种运算符详解及优先级