材料ui/redux表单框架中的星型字段评级

Question

我正在开发一个react网站--使用了一个使用物质用户界面和redux表单的表单框架

我在一个页面上呈现了两个具有唯一id的表单--但我不明白为什么评级字段会导致另一个改变--可能是因为它是一个材料实验室组件？

• 如何使评级字段稳定，从而使其作为这样的单选按钮/整数域
• 如何使这些恒星返回到UI中的黄金？

//沙箱https://codesandbox.io/s/quirky-noyce-gbwf7?file=/src/GenericForm/GenericForm.js

​

​

https://material-ui.com/components/rating/

Answer 1

解决方案是确保评级组件上的名称是唯一的--所以我在名称末尾添加了一个uuid

  <Rating 
    {...input}
    name={input.name + "-" +uuid()}
    value={parseFloat(input.value)}
    onChange={(e, value) => {            
        input.onChange(value);
        onHandle(input.name, value);
    }}
    defaultValue={0} 
    max={max}
    disabled={disabled}
    precision={0.5}
  />