退格键不适用于带有 NumberFormat 的材料 ui TextField答案

【问题标题】：Backspace key does not work for material ui TextField with NumberFormat退格键不适用于带有 NumberFormat 的材料 ui TextField
【发布时间】：2020-08-06 00:54:36
【问题描述】：

我正在尝试使用 react-number-format (NumberFormat) 来格式化数值在材质 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,
    }}

【问题讨论】：

标签： reactjs material-ui textfield

【解决方案1】：

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

警告：失败的道具类型：无效道具type 提供给number 的NumberFormat，应为 ["text","tel","password"] 之一。在 NumberFormat 中（在 demo.tsx:14）

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

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

【讨论】：

是否有一种解决方法可以让 type="number" 工作但也让退格在那里工作？