如何点击后禁用MDB Rating组件？限制用户重复投票

先修正你代码里的几个关键错误 #

1. 函数组件不能用this：你最初尝试的onClick={() => this.disabled=true}报错，是因为函数组件没有实例this，必须用React状态来管理禁用状态。
2. 状态更新函数调用错误：你修改代码里的setIsNotClicked = false是错误的，setIsNotClicked是React提供的状态更新函数，必须通过调用它来更新状态：setIsNotClicked(false)。

正确实现方案 #

下面是完整的修复代码，核心思路是用状态标记是否已投票，投票后锁定状态，阻止后续的星级更新和投票请求：

import { useState } from 'react';
import { MDBRating, MDBRatingElement } from 'mdb-react-ui-kit';

function Rating(props) {
  const [activeValue, setActiveValue] = useState(0);
  // 新增状态：标记是否已完成投票
  const [isVoted, setIsVoted] = useState(false);

  // 封装投票逻辑，先判断是否已投票
  const handleRating = (ratingValue) => {
    if (isVoted) return; // 已投票则直接返回，不执行后续操作
    addRating(props.id, ratingValue);
    setActiveValue(ratingValue); // 同步更新星级显示
    setIsVoted(true); // 标记为已投票，锁定组件
  };

  return (
    <MDBRating
      active={activeValue}
      // 已投票时，将setActive设为空函数，阻止星级更新
      setActive={isVoted ? () => {} : setActiveValue}
    >
      <MDBRatingElement
        title="Terrible"
        itemId={1}
        icon="star"
        onClick={() => handleRating(1)}
        // 如果组件支持disabled属性，直接添加增强UI禁用体验
        disabled={isVoted}
      />
      <MDBRatingElement
        title="Poor"
        itemId={2}
        icon="star"
        onClick={() => handleRating(2)}
        disabled={isVoted}
      />
      <MDBRatingElement
        title="OK"
        itemId={3}
        icon="star"
        onClick={() => handleRating(3)}
        disabled={isVoted}
      />
      <MDBRatingElement
        title="Good"
        itemId={4}
        icon="star"
        onClick={() => handleRating(4)}
        disabled={isVoted}
      />
      <MDBRatingElement
        title="Excellent"
        itemId={5}
        icon="star"
        onClick={() => handleRating(5)}
        disabled={isVoted}
      />
    </MDBRating>
  );
}

关键说明 #

• 双重锁定机制：既在点击逻辑里判断isVoted拦截投票请求，又给星级元素添加disabled属性从UI层面阻止点击；同时替换setActive为空函数，彻底阻止星级状态更新。
• 无需useEffect：这个场景下状态的同步可以直接在点击处理函数里完成，不需要额外的useEffect监听。

内容的提问来源于stack exchange，提问作者Miller42