React绑定事件this指向问题--改变state中的值

/**
    *  报错:
    *  Cannot read property 'setState' of undefined
    *  原因: this指向不一致。btnAddCount中的this 和render中的this
    *  解决方法:
    *      方式一: 使用箭头函数 () => { }  箭头函数可以改变this指向,即谁调用,this指向谁
    *      方式二: 绑定函数时,添加 ‘ .bind(this)’  onClick={this.btnSubCount.bind(this)
    *
*      在 React 里面,要将类的原型方法通过 props 传给子组件,传统写法需要 bind(this),否则方法执行时 this 会找不到:

    <button onClick={this.handleClick.bind(this)}></button>
    或者

    <button onClick={() => this.handleClick()}></button>
    * */
   /*btnAddCount(){
       this.setState({
           // 不要直接修改state的值  this.state.count++
           count: this.state.count + 1
       })
   }*/
   btnAddCount =  () => {
       this.setState({
           // 不要直接修改state的值 this.state.count++
           count: this.state.count + 1
       });
   };
   btnSubCount(){
       this.setState({
           count: this.state.count - 1
       })
   }
   render() {
       return (
           <div>有状态组件:
               <h2>计数器: {this.state.count}</h2>
               <button onClick={this.btnAddCount}>+1</button>
               <button onClick={() => this.btnAddCount()}>+1</button>
               <button onClick={this.btnSubCount.bind(this)}>-1</button>
               <button onClick={() => {
                   this.setState({
                       count: this.state.count - 1
                   })
               }}>-1</button>
           </div>
       )
   }
}
// 渲染这个组件
ReactDOM.render(<StateUseDemo />, document.getElementById('root'));

ES5 方法

 // ES5方法绑定this 在constructor中添加
    this.btnAddCount =  this.btnAddCount.bind(this);

原文地址:https://www.cnblogs.com/YangxCNWeb/p/11965620.html

时间: 2024-10-30 06:00:06

React绑定事件this指向问题--改变state中的值的相关文章

React 修改获取state中的值

14===> 修改state中的值 不能够直接修改 state = { num: 10 } 如 this.state.num+=12; 不能够直接修改 错误 通过 this.setState({ num:this.state.num+12 }) 15==> 获取state中的值 ps==>当你进入一个组件时 不能够使用下面这一种方式 import {StaTest} from "./components/StaTest" 报错 应该为import StaTest fr

冒泡,setinterval,背景图的div绑定事件,匿名函数问题--工作中的思考

<1>会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b").click(function(){alert("b")}) $("#c1").click(function(){alert("c1")}) $("#c2").click(function(){alert(&qu

react 绑定事件

1.显示隐藏 2.输入框输入内容,立即显示出来 代码如下: 注意:版本 React v15.0.1 ReactDOM v15.0.1 browser.min.js是编译文件,将代码解析为浏览器识别的js <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <script type="text/javascript"

react绑定事件

1.显示隐藏 2.输入框输入内容,立即显示出来 代码如下: 注意:版本 React v15.0.1 ReactDOM v15.0.1 browser.min.js是编译文件,将代码解析为浏览器识别的js <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <script type="text/javascript"

jQuery中的bind绑定事件与文本框改变事件的临时解决方法

暂时没有想到什么好的解决办法,我现在加了个浏览器判断非ie的话就注册blur事件,这样有个问题就是blur实在别的控件活动焦点的时候,txtStation控件注册的方法是为了填充它紧挨着的一个下拉列表一直没什么兴趣看jQuery,就用自己那点不咋样的javascript硬撑着,今天写一个功能时想尝试一下,用bind注册事件时发现怎么都不好使$("#txtStation").bind("onpropertychange", GetStationLevel); 复制代码

如何在main.js中改变vuex中的值?

做登录权限控制的时候, 我通过全局路由守卫来去做权限判断,这样的话可能需要在整个项目加载的初期去做一些诸如 接口请求. vuex修改 之类的问题 其实非常简单,直接如图: 应该就没问题了 此外还可以参考一下:https://www.cnblogs.com/stella1024/p/10563091.html 研究一下vue中各文件的加载顺序 原文地址:https://www.cnblogs.com/wangtong111/p/11819153.html

jquery中on绑定事件

之前项目中动态创建的标签元素  在绑定事件的时候  都是无效  无论如何都不能触发 eg:在页面加载完成之后   再由脚本动态创建的<div>元素  在绑定事件的时候 例如click事件 $("div").click(function(alert("aaa")){}); 那么动态创建的元素是触发不了这个事件的 这是就要用到on来绑定事件了. 但是在W3C中并没有on事件  只有live,delegate 这是由于这里的更新很不及时  ,建议去http:/

Angular如何给动态生成的元素绑定事件

在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular.module('myapp',[]) .directive('myText',function(){ return{ restrict:'A', template:'<div ng-click="hello()">Hi everyone</div>', link:

Android自定义工具类获取按钮并绑定事件(利用暴力反射和注解)

Android中为按钮绑定事件的有几种常见方式,你可以在布局文件中为按钮设置id,然后在MainActivity中通过findViewById方法获取按钮对象实例,再通过setOnClickListener为按钮绑定事件,如下所示: //1.获取控件 btn = (Button)findViewById(R.id.button1); //2.绑定事件 btn.setOnClickListener(new OnClickListener() { @Override public void onCl