无法更改 MUI v5 TextField 中的十进制值

Question

我试图在 MUI5 的TextField组件中显示十进制值1.0 。 我只能使用TextField的图标更改其值，但不能在尝试输入任何值时更改。 退格键似乎不起作用。

摘自我的代码

export default function App() {
  const [value, setValue] = useState(1);
  const handleChange = (e) => {
    setValue(e.target.value);
  };
  return (
    <div className="App">
      <TextField
        fullWidth
        variant="outlined"
        id="value"
        name="value"
        type="number"
        label="Decimal Value"
        value={parseFloat(value).toFixed(1)}
        onChange={handleChange}
      />
    </div>
  );
}

我使用CodeSandbox创建了一个工作示例。 有人可以帮忙吗？

Answer 1

尝试在onBlur而不是onChange格式化值。 当您在onChange键入退格键时，该值为1.但在下一次渲染中无论如何都将其格式化为1.0并撤消您的工作：

<TextField
  type="number"
  inputProps={{
    maxLength: 13,
    step: '1',
  }}
  value={value}
  onChange={handleChange}
  onBlur={(e) => setValue(parseFloat(e.target.value).toFixed(1))}
/>