react 做一个点赞按钮组件

点击按钮，喜欢或者取消

小图标用的是 https://emojipedia.org/ 这个网站的 直接复制使用即可

 

 创建组件Like.js

一开始设置为黑色false，isLiked如果为true渲染红心，false渲染黑心

setState时用了两种方法

import React, { Component } from 'react'

export default class Like extends Component {
    constructor(){
        super()
        this.state={
            isLiked:false
        }
    }
    render() {
        return (
                <span onClick={this.handleLike.bind(this)}>
                    {
                    this.state.isLiked ? '取消💓' :'喜欢🖤'
                    }
                </span>
        )
    }

    handleLike(){
        // console.log("sss")
        //第一种修改setState方法
        // this.setState({
        //     isLiked:!this.state.isLiked
        // })

        //第二种prevState是上次的state
        this.setState((prevState)=>{
            console.log(prevState)
            return{
                isLiked:!prevState.isLiked
            }
        },()=>{
            console.log(this.state.isLiked) //setState回调 获取最新的状态
        })
    }
}