其他分享
首页 > 其他分享> > react 点赞

react 点赞

作者:互联网

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