如何在Material UI中使用2个小数点分隔符？

问题描述

我在项目中使用Material UI，并且我希望允许用户在逗号或句点之间进行选择作为小数点分隔符。它们不是货币输入字段，而只是可以具有小数位的数字字段。当前仅接受句点，如果用户按下逗号，则什么也没有发生。

解决方法

使其为type='number'会将值解析逻辑限制为html中添加的默认值。如果要根据规则解析在字段中输入的值，则必须显式解析。为此，我们可以使用正则表达式来测试字段中每次击键所产生的输入值。然后如果限制规则，则将限制填充值。

您可以使用以下正则表达式来测试输入

//Dot: /^\d+(\.\d{0,2})?$/
//Comma: /^\d+(,\d{0,2})?$/

您在这里看到正在运行的演示：https://codesandbox.io/s/material-demo-forked-2gmmn?file=/demo.js