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

【问题标题】：How to deselect only the star which is clicked and not all the stars in rating component in Reactjs material ui 5(mui5)?如何在 Reactjs material ui 5(mui5) 中只取消选择被点击的星而不是所有星？
【发布时间】：2022-12-23 10:29:32
【问题描述】：

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

【问题讨论】：

请提供足够的代码，以便其他人可以更好地理解或重现问题。

标签： javascript reactjs material-ui

【解决方案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);
    }
  }}
/>

【讨论】：