单个表单内使用多个Material UI Rating组件仅第一个更新如何解决

问题根因 #

Material UI的Rating组件底层基于radio类型的input实现，浏览器会将拥有相同name属性的radio input识别为同一组单选按钮，同一时间仅允许同组内有一个选中值。你当前两个Rating组件的name属性均为simple-controlled，被识别为同一组控件，因此操作任意组件都会触发第一个组件的状态更新。

解决方案 #

给两个Rating组件设置不同的唯一name属性即可实现独立更新：

• 修改Rate1.js内的Rating组件配置：

<Rating
  name="rate-1" // 自定义唯一的name值
  value={value1}
  onChange={(event, newValue) => {
    setValue1(newValue);
  }}
/>

• 修改Rate2.js内的Rating组件配置：

<Rating
  name="rate-2" // 和另一个Rating的name值区分开
  value={value}
  onChange={(event, newValue) => {
    setValue(newValue);
  }}
/>

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