react 做一个点赞按钮组件
原创
©著作权归作者所有:来自51CTO博客作者小羽向前跑的原创作品,请联系作者获取转载授权,否则将追究法律责任
创建组件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回调 获取最新的状态
})
}
}