我正在使用material-ui在我的TextField应用中渲染react组件。它以某种方式强制所有<TextField type="number />使用小数点分隔符作为逗号（，）而不是点（。），这会使目标用户感到困惑。
是否有任何方法可以强制将点始终显示为小数点分隔符，而不考虑语言环境？
我创建了一个small example here。只需尝试输入带小数的数字，然后单击外部，它将转换为逗号。这可能是由于我当前的设备区域设置所致，但我仍然想为每个人强加一个点。
强制类型为数字的TextField将点显示为小数点分隔符
•
问答
renleo 回答：强制类型为数字的TextField将点显示为小数点分隔符
根据我的建议，将第三方库集成到Textfield组件中；您可以将react-number-format库用作Textfield的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"
/>
有关功能全面的示例，请查看此sandbox。
,对我来说，在 "en-US" 中将语言属性设置为 inputProps 有效：
<TextField
type="number"
inputProps={{step: "0.1",lang:"en-US"}}
/>