react 点赞

2020-10-30 17:01:56 阅读：303 来源： 互联网

标签：increaseLikes 绑定 react state likes 点赞 setState 事件

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()方法修改

标签：increaseLikes,绑定,react,state,likes,点赞,setState,事件
来源： https://www.cnblogs.com/150536FBB/p/13903018.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react 点赞