React Material-ui 文本字段小数步长为 1.00，默认为 1.00

Question

我正在使用 React Material ui 与此 Textfield：

\n

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

\n

我想使用箭头以获得 1.00 的步长，因此将 1.00 作为默认数字，我可以可视化 2.00 或 0.00 数字。\n现在的结果是： 1.00 -> （向上箭头） -> 2 所以基本上它删除了我想要的零。

\n

Answer 1

每次事件触发时使用受控 TextField并格式化数字change。看这个答案。

另请注意，中显示的值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))}
    />
  );
}

Answer 2

我只是想添加我的答案，因为我认为以下之间存在区别：

\n

inputProps&InputProps

\n

              <TextField\n                {...getFieldProps('price')}\n                fullWidth\n                label="Price"\n                type="number"\n                inputProps={{\n                  step: 0.5,\n                }}\n                InputProps={{\n                  startAdornment: <InputAdornment position="start">\xc2\xa3</InputAdornment>,\n                  endAdornment: <InputAdornment position="end">per person</InputAdornment>,\n                }}\n                error={Boolean(touched.price&& errors.price)}\n                helperText={touched.price&& errors.price}\n              />\n

\n