Javascript 物料界面输入类型编号重置值不正确

我已经用

type='number'

控制了材料界面为

的组件，并希望通过按钮将其清除。但这个组件有自我验证功能，如果我输入了诸如“-8”之类的内容或其他不正确的数值，我就无法通过按钮清除输入。我怎么能修好它

示例如下：

代码：

import React from "react";

import FormControl from "@material-ui/core/FormControl";

import InputLabel from "@material-ui/core/InputLabel";
import OutlinedInput from "@material-ui/core/OutlinedInput";

export default function ComposedTextField() {
  const [number, setNumber] = React.useState(123);

  const handleChange = event => {
    const value = event.target.value;
    console.log(value);
    setNumber(value);
  };

  const clear = () => {
    setNumber("");
  };
  return (
    <div>
      <form noValidate autoComplete="off">
        <FormControl variant="outlined">
          <InputLabel htmlFor="component-outlined">Number</InputLabel>
          <OutlinedInput
            id="component-outlined"
            value={number}
            onChange={handleChange}
            label="number"
            type="number"
          />
        </FormControl>
      </form>
      <button onClick={clear}> clear input </button>
    </div>
  );
}

从“React”导入React；
从“@material ui/core/FormControl”导入FormControl；
从“@material ui/core/InputLabel”导入InputLabel；
从“@material ui/core/OutlinedInput”导入OutlinedInput；
导出默认函数ComposedTextField（）{
const[number，setNumber]=React.useState（123）；
const handleChange=事件=>{
常量值=event.target.value；
console.log（值）；
设置编号（值）；
};
常数清除=（）=>{
集合号（“”）；
};
返回(
数
清晰输入
);
}

它与

setNumber（'nbsp'）一起工作。在代码中尝试一下，希望有帮助：）

退房

const clear=（）=>{
设置编号（'nbsp'）；
};
它与
setNumber（'nbsp'）一起工作。在代码中尝试一下，希望有帮助：）

退房

const clear=（）=>{
设置编号（'nbsp'）；
};
答案是thnx reymon359，但它看起来像黑客。我决定更改文本的输入类型，并将这一行添加到代码中：

value = value.replace(/[^0-9.\-+,]/g, '');

所以它的工作原理和预期的一样。
答案是thnx reymon359，但它看起来像hack。我决定更改文本的输入类型，并将这一行添加到代码中：

value = value.replace(/[^0-9.\-+,]/g, '');

因此，它的工作原理与预期一致