如何防止多次点击带有点赞计数器的点赞按钮答案

【问题标题】：How to prevent multiple click on a like button with likes counter如何防止多次点击带有点赞计数器的点赞按钮
【发布时间】：2021-01-10 11:57:17
【问题描述】：

我创建了一个点赞按钮组件，它包含一个按钮和一个点赞计数器文本字段。每个按钮单击都会将状态从喜欢更改为不喜欢状态，或从不喜欢更改为喜欢状态。当我多次快速按下按钮时，它会多次更改计数器值。如何防止这种行为？

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

【问题讨论】：

标签： javascript reactjs button redux material-ui

【解决方案1】：

我通常通过保存一个布尔值来做这样的事情，所以如果你点击按钮，布尔值就会变成真，如果它是真的，你就不能再点击按钮了。

例如

pressed = false;
if(!pressed){
    // Do things
    pressed = true;
}

【讨论】：

【解决方案2】：

您可以使用debounce 来防止点击

import {debounce} from 'lodash'

const handleClickButton = debounce(() => {
    console.log('click')
}, 1000)

【讨论】：