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

Question

I tried to display decimal value 1.0 in the MUI5's TextField component. I'm able to change its value only with the icons in the TextField but not when I try to input any value. Backspace does not seem to work.

Excerpt from my code

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>
  );
}

I created a working example using CodeSandbox . Could anyone please help?

Answer 1

Try formatting the value in onBlur instead of onChange . When you type backspace in onChange the value is 1. but is formatted to 1.0 anyway in the next render and undo your work:

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