如何在 Reactjs material ui 5(mui5) 中只取消选择被点击的星而不是所有星？

Question

例如：我点击了评分组件的第 3 颗星，但当我再次点击第 3 颗星时，评分组件删除了之前的所有星，即显示 0 颗星。 如何实现：如果我第二次点击第 3 颗星，它应该只会移除第 3 颗星并显示 2 颗星而不是 0 颗星。

Answer 1

如果您选择第三颗星并再次单击它。

按照 Material UI Rating 的功能，它会给你 newValue 是 null。

只需检查 newValue 是否为 null，将当前值减去 1。

例如：

<Rating
  name="simple-controlled"
  value={value}
  onChange={(event, newValue) => {
    if (newValue === null) {
      setValue(value - 1);
    } else {
      setValue(newValue);
    }
  }}
/>