问题描述:
在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的内容,如图: