import React from 'react'; class Likes extends React.Component{ constructor(props){ super(props) this.state = { likes: 0 } // this.increaseLikes = this.increaseLikes.bind(this) } increaseLikes(){ this.setState({ likes: ++this.state.likes }) } render(){ return( <div> <button className="btn btn-outline-promary btn-lg" onClick={()=>{this.increaseLikes()}} > 赞{this.state.likes} </button> </div> ) } } export default Likes;
事件使用驼峰式 不可为全小写
事件中设置this的问题:
直接绑定事件后,事件中this为undefined,需要在constructor中绑定:
this.increaseLikes = this.increaseLikes.bind(this)或者在绑定事件的时候写成:
onClick={()=>{this.increaseLikes()}}
两种方法都可以解决这个问题
修改state中的数据必须通过 this.setState()方法修改