Question

我正在尝试使用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,
    }}

Answer 1

实际上有一个控制台警告告诉您该问题：

警告：道具类型失败：提供给type的值为number的道具NumberFormat无效，期望是[“ text”，“ tel”，“ password”]中的一个。在NumberFormat中（位于demo.tsx：14）

如果您从type="number"中删除了无效的TextField，那么它似乎可以正常工作。

https://codesandbox.io/s/material-demo-ovx7i

退格键不适用于具有NumberFormat的材料ui TextField

1 个答案: