javascript - React material-ui textfield decimal step 1.00 on 1.00 作为默认数字

Question

我正在使用带有此文本字段的 react Material ui:

<TextField 
    required
    id="qty" 
    type="number"
    label="Qtà" 
    defaultValue={!props.row.qty ? '1.00' : props.row.qty} 
    step={1.00}
    variant="outlined" 
    error={HP_qty.length === 0 ? false : true}
    helperText={HP_qty}
    inputProps={{
      maxLength: 13,
    }}
    onBlur={(e) => onBlur(e,HP_qty)}/>

我想使用箭头来设置 1.00 步长，因此将 1.00 作为默认数字，我可以将 2.00 或 0.00 数字可视化。
现在的结果是: 1.00 ->(向上箭头)-> 2 所以基本上它会删除我想要的零。

Answer 1

使用controlled TextField并且每次格式化数字change事件触发。见 this回答。
另请注意 TextField 中显示的值现在是一个字符串，因此您可能希望在提交更改之前将其转换回数字。

function App() {
  const [value, setValue] = useState("0.0");
  return (
    <TextField
      type="number"
      value={value}
      variant="outlined"
      inputProps={{
        maxLength: 13,
        step: "1"
      }}
      onChange={(e) => setValue(parseFloat(e.target.value).toFixed(1))}
    />
  );
}