當用戶開始輸入時刪除占位符 0

Question

我正在使用 Material UI 的<TextField/>並希望允許用戶輸入浮點數（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>
  );
}

Answer 1

問題是您在每次鍵更改時將其從數字轉換為字符串，因此如果您輸入的小數點以 0 結尾，則不考慮數字本身的一部分。 直接設置v = Number(v)有什么問題？

Answer 2

像這樣的事情呢？

import React, { useState } from "react";
import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  root: {
    "& .MuiTextField-root": {
      margin: theme.spacing(1),
      width: "25ch"
    }
  }
}));

export default function FormPropsTextFields() {
  const classes = useStyles();
  let [v, setv] = useState(0);

  const clearPlaceholder = () => {
    if (v === 0) setv("");
  };

  const parseNumber = () => {
    if (!v) setv(0);
    setv(Number(v).toString())
  };

  // v = Number(v).toString();

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