React中MUI TextField设置min/max后无法输入小数如何解决

浏览器原生type="number"输入框默认步长step值为1，仅允许输入整数。当前组件仅配置了min=36、max=40，未显式设置step属性，当输入36.5这类处于36-40区间内的小数时，浏览器会判定值不符合步长规则，连带触发min-max范围校验的错误提示，并非输入的数值真的超出了设定范围。

根据业务需要给透传的原生input属性补充step配置即可：

• 若体温录入仅需支持1位小数，将step设为0.1
• 若需要支持任意精度的小数，直接将step设为"any"即可，此时浏览器仅校验数值是否在min-max区间内，不会拦截合法小数

修复后的完整组件代码：

<TextField
  type="number"
  InputProps={{ inputProps: { min: 36, max: 40, step: 0.1 } }}
  onFocus={() => handleOnFocus('bodyTemp')}
  onChange={(e) => setBodyTemp(e.target.value)}
  value={bodyTemp}
/>

注意：MUI TextField的原生DOM属性必须放在InputProps.inputProps层级下才能正确透传，当前代码的属性层级写法是正确的，仅需补充step属性即可，不要把min/max/step直接写在TextField根属性上，会导致配置不生效。

内容的提问来源于stack exchange，提问作者Mel Carlo Iguis