如何在 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);
    }
  }}
/>