zoukankan      html  css  js  c++  java
  • 02 React快速入门(二)——this的指向和数据修改问题

    问题描述:

          在react学习中,通过定义一个按钮,然后为此按钮绑定一个事件,此事件主要的功能就是用户点击按钮,就会在相应的页面增加一个item选项。在代码层面来说,在代码里的state下的list会增加一个数据,如下所示:

          初始化函数中定义了一个state变量,此变量下有一个空的list数组,来存放数据:

    constructor(props){ //组件初始化函数,一调用组件就自动执行
    super(props); //初始化一些参数,不必理会
    this.state={ //定义state来存放数据
    list:[
    
    
    ],
    reactid:0 //此参数主要是解决key的报错问题而定义
    }
    }
    
    

         按钮上绑定的事件,想通过此事件动态的增加list中的内容:

    handleBtnClick(){
    this.state.list.push("hello word"); //直接更新数据无反应
    }

         按钮上绑定事件:

    <button onClick={this.handleBtnClick}>add</button>

          上述代码在编写时是没有错误提示的,但是在点击按钮时就会有报错,说是“state”属性没有找到,然后查阅资料才发现是this的问题,解决之后点击按钮,此时没有错误提示,但是数据并没有增加,于是又是查阅资料,才找到解决方法。

    解决方法:

          1 关于this的解决方法(state报错)

          1)在我们绑定时间的时候,“onClick={this.handleBtnClick}”中的这个this实际上指定的就是这个组件,这部分是没有错误的,你点击按钮,这个函数它是能调用的,问题就出现在函数里面“this.state.list.push("hello word")”这个语句上面,而且报错也是说这里的state没有找到。

          2)在函数中的这个this其实它是没有指向这个组件的,我们想修改这个组件里的state下的list内容,但是它并没有指向这个组件,那么它肯定就报错了,那么你可能会问,它到底指向哪,这的this其实指向的是button这个按钮。

          3)问题找到后,我们就要解决,那么此问题解决的最简单的方法就是在绑定事件的时候通过bind这个函数,改变事件中this的指向,如下;

    <button onClick={this.handleBtnClick.bind(this)}>add</button>

           通过bind(this)这个语句,我们将函数中的this指向改变成了指向这个组件,所以,此时我们点击按钮的时候它就没有关于state的报错了。

          2 数据不增加的解决方法

          1)虽然上述步骤解决了state的报错问题,但是点击按钮的时候数据并不会增加,原来,我们在react中不能直接使用push这种做法在list中添加内容,而是要用setState方法来改变,如下:

    handleBtnClick(){
    this.setState({
    list:[...this.state.list,'hello world']
    });
    }

          2)上述的数组中使用了ES6的语法,实现了每点击一次按钮,就会增加一个hello word的内容,如图:

    X北辰北的博客,想看更多内容,请移步我的个人博客:http://www.xbeichenbei.com/
  • 相关阅读:
    二叉搜索树的后序遍历序列
    验证二叉搜索树
    合并二叉树
    工龄计算方案
    hadoop集群中动态添加节点
    java知识点
    Hadoop经典案例(排序&Join&topk&小文件合并)
    mysql学习
    大数据开发面试
    我保存的网址
  • 原文地址:https://www.cnblogs.com/xuqw/p/11794663.html
Copyright © 2011-2022 走看看