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的内容，如图：