reactjs - 退格键不适用于具有 NumberFormat 的 Material ui TextField

Question

我正在尝试使用react-number-format (NumberFormat) 来格式化数值 在 Material ui TextField 中。这是例子 我可以输入新的数字字符，但无法删除任何字符 使用退格键对字符进行编号。 我也无法使用箭头或删除键。 我可以删除任何数字字符的唯一方法是 用鼠标选择这些字符并按 空格键。

虽然不是我的，但以下代码沙箱复制了我得到的内容: 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

实际上有一个控制台警告告诉您问题所在:

Warning: Failed prop type: Invalid prop type of value number supplied to NumberFormat, expected one of ["text","tel","password"]. in NumberFormat (at demo.tsx:14)

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

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