Javascript 用户开始键入时删除占位符0

我正在使用Material UI的

，希望允许用户输入浮点数（14.99、10.50、1.02）。我想做的另一件事是，如果没有设置值，则占位符为0。我设法完成了后一部分，但现在我无法输入小数点后带0的数字（例如4.05）

这是一个代码沙盒，几乎包含了我正在做的事情

这里还有一个最小的可重复示例：

export default function TextFieldTest() {
  const classes = useStyles();
  let [value, setValue] = useState(0);

  value = Number(v).toString();

  return (
    <form className={classes.root} noValidate autoComplete="off">
      <div>
        <TextField
          id="standard-number"
          label="Number"
          type="number"
          value={value}
          onChange={e => setValue(e.target.value)}
          inputProps={{ step: 0.01, type: "number", min: 0 }}
        />
      </div>
    </form>
  );
}

导出默认函数TextFieldTest（）{
const classes=useStyles（）；
let[value，setValue]=useState（0）；
值=数字（v）.toString（）；
返回(
setValue（e.target.value）}
inputProps={{step:0.01，键入：“number”，min:0}
/>
);
}
问题是你在每一个按键变化中从数字转换为字符串，所以如果你输入一个小数结尾的数字为0，那就不算是数字本身的一部分。直接设置
v=Number（v）
有什么问题？
像这样的东西怎么样

import React，{useState}来自“React”；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/styles”导入{makeStyles}”；
const useStyles=makeStyles（主题=>({
根目录：{
“&.MuiTextField根”：{
边距：主题。间距（1），
宽度：“25厘米”
}
}
}));
导出默认函数FormPropsTextFields（）{
const classes=useStyles（）；
设[v，setv]=useState（0）；
常量clearPlaceholder=（）=>{
如果（v==0）setv（“”）；
};
const parseNumber=（）=>{
如果（！v）设置为（0）；
setv（数字（v）.toString（））
};
//v=数字（v）.toString（）；
返回(
clearPlaceholder（）}
onBlur={（）=>parseNumber（）}
onChange={e=>setv（e.target.value）}
inputProps={{step:0.01，键入：“number”，min:0}
/>
);
}
请在问题本身中添加一个，而不仅仅是一个指向外部资源的链接。当我将useState（）保留为空时，如“let[value，setValue]=useState（）；”，它将数字用作占位符，当我单击框时，它会自动将其上移，就像您希望的那样。我建议离开useState（）；空的。谢谢，@Eren。例如，即使我这样做了，我仍然无法输入1.04。如果开始键入时没有值（即占位符为“0”），它将变为01，而不是1。这似乎是React的一个已知问题：（它也发生在
Number（）
中）