import React, { Component } from 'react'
export default class Like extends Component {
constructor() {
super();
this.state = {
isLike: false,
isLike2: false,
}
}
// 点击事件
handleLikeBtn = () => {
// react 里修改数据用setState 方法,该方法可以有两个参数,第一个参数有两种情况:
// 当第一个参数是对象时:
this.setState({
isLike: !this.state.isLike
})
// 当第一个参数是方法时,
this.setState((preState, props) => {
// 可以在第一个方法中获取之前的数据和props数据
return {
isLike2: !preState.isLike2
}
}, () => {
// setState是异步的,可以在第二个方法中得到最新的数据
console.log(this.state.isLike2 );
})
}
render() {
return (
<div>
<span style={{ fontSize: '36px', cursor: 'pointer' }}
onClick={this.handleLikeBtn} >
{ this.state.isLike ? '取消 ❤️' : '喜欢 💙' }
{ this.state.isLike2 ? '取消 😁' : '喜欢 🤪' }
</span>
</div>
)
}
}
<Like name="茄子"></Like>
效果: