强制类型为数字的TextField将点显示为十进制分隔符

Question

我正在使用material-ui在我的react应用程序中呈现TextField组件。它以某种方式强制所有<TextField type="number />使用逗号(，(而不是句点(.(的十进制分隔符，这会让目标用户感到困惑。

有没有任何方法可以强制它始终将句点显示为十进制分隔符，而不考虑区域设置？

我在这里创建了一个小示例。只需尝试输入一个带小数的数字，然后单击外部，它就会将其转换为逗号。这可能是因为我当前的设备区域设置，但我仍然想为每个人强制添加一个点。

Answer 1

对我来说，在inputProps中将语言属性设置为"en-US"有效：

<TextField
type="number"
inputProps={{step: "0.1", lang:"en-US"}}
/>

Answer 2

根据我的建议，使用第三方库集成在Textfield组件中；您可以使用react数字格式库作为Text字段的inputProp。它之所以有效，是因为前面提到的库提供的数字格式化程序有一个默认为一个字符串"."的decimalSeparator道具

自定义数字格式化程序如下所示：

import NumberFormat from 'react-number-format';
interface NumberFormatCustomProps {
inputRef: (instance: NumberFormat | null) => void;
onChange: (event: { target: { value: string } }) => void;
}
function NumberFormatCustom(props: NumberFormatCustomProps) {
const { inputRef, onChange, ...other } = props;
return (
<NumberFormat
{...other}
getInputRef={inputRef}
onValueChange={values => {
onChange({
target: {
value: values.value
}
});
}}
isNumericString
/>
);
}

它可以用于数字文本字段，如下所示：

<TextField
label="react-number-format"
value={values.numberformat}
onChange={handleChange("numberformat")}
id="formatted-numberformat-input"
InputProps={{
inputComponent: NumberFormatCustom as any
}}
type="number"
/>

要获得一个功能齐全的示例，请查看此沙箱。

Answer 3

我提出了同时接受和的解决方案。使用regex验证器的分隔符。

除了控制输入标签之外，我还控制外部数字状态<数字|null>。

在我的解决方案中，用户只能输入分隔的小数。或者，只有当用户输入可转换为浮点时，输入标签和数字状态才会改变"输入，数字状态设置为null。

const [inputValue, setInputValue] = useState<string>("")
const [numericValue, setNumericValue] = useState<number | null>(null)
return (<TextField
inputMode={"numeric"}
onChange={(e) => {
e.preventDefault();
// if new value is valid float
if (/^([d]*[,.]?[d]{0,2})$/.test(e.target.value)) {
setInputValue(e.target.value);
const parsed = parseFloat(
e.target.value.replaceAll(",", ".")
);
setNumericValue(isNaN(parsed) ? null : parsed)
}
}}
value={inputValue}
/>);