如何解决如何防止用喜欢计数器多次点击喜欢的按钮
我创建了一个“喜欢”按钮组件,它包含一个按钮和一个“喜欢”计数器文本字段。 每次单击按钮都会将状态从“喜欢”状态更改为“不喜欢”状态,或从“不喜欢”状态更改为“喜欢”状态。 当我快速按几次按钮时,它会多次更改计数器值。 如何防止这种行为?
const LikeButton = (props) => {
const classes = useStyles();
const dispatch = usedispatch();
const { token } = useSelector((state) => state.auth);
const likePostHandler = () =>{
dispatch(likePost(props.post_ID,token))
}
const unlikePostHandler = () =>{
dispatch(unlikePost(props.post_ID,token))
}
return (
<div className={classes.button}>
{props.isLiked && (
<Tooltip
onClick={unlikePostHandler}
title="Undo like"
placement="top"
>
<FavoriteIcon color="primary"/>
</Tooltip>
)}
{!props.isLiked && (
<Tooltip
onClick={likePostHandler}
title="Like"
placement="top"
>
<FavoriteBorderIcon color="primary"/>
</Tooltip>
)}
<span className={classes.span}>{props.likesCounter} Likes</span>
</div>
)
}
export default LikeButton
解决方法
我通常通过保存一个布尔值来做这样的事情,因此,如果单击按钮,布尔值将变为true;如果为true,则不能再单击该按钮。
例如。
pressed = false;
if(!pressed){
// Do things
pressed = true;
}
,
您可以使用debounce
来防止点击
import {debounce} from 'lodash'
const handleClickButton = debounce(() => {
console.log('click')
},1000)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。