我正在尝试使用react-number-format(NumberFormat)格式化数字值 在材料ui TextField中。在这个例子中 我可以输入新的数字字符,但不能删除任何数字 使用Backspace键编号字符。 我也不能使用箭头或删除键。 我可以删除任何数字字符的唯一方法是 用鼠标选择这些字符,然后按 空格键。
虽然不是我的,但以下代码沙箱复制了我得到的内容: https://codesandbox.io/s/material-demo-iny12?file=/demo.tsx
function NumberFormatCustom(props) {
const { inputRef, onChange, ...other } = props;
return (
<NumberFormat
{...other}
customInput={TextField}
getInputRef={inputRef}
onValueChange={values => {
onChange({
target: {
value: values.value,
},
});
}}
/>
);
}
<TextField
margin="dense"
fullWidth={true}
value={value}
onChange={handleNumberChanged}
variant="outlined"
autoComplete="off"
type="number"
InputProps={{
inputComponent: NumberFormatCustom,
}}
答案 0 :(得分:2)
实际上有一个控制台警告告诉您该问题:
警告:道具类型失败:提供给
type
的值为number
的道具NumberFormat
无效,期望是[“ text”,“ tel”,“ password”]中的一个。 在NumberFormat中(位于demo.tsx:14)
如果您从type="number"
中删除了无效的TextField
,那么它似乎可以正常工作。