I have a table with some text fields and values. The values are already given. They are all whole numbers and I am trying to change one of them to a float using point or comma but when I use the comma or point they get deleted.
const DEFAULT_CHARGING_CURVE = [
{ SoC: 44, power: 250 },
{ SoC: 48, power: 240 },
{ SoC: 51, power: 220 },
{ SoC: 54, power: 200 },
{ SoC: 57, power: 180 },
{ SoC: 61, power: 170 },
{ SoC: 65, power: 160 },
{ SoC: 69, power: 155 },
{ SoC: 70, power: 145 },
{ SoC: 76, power: 115 },
{ SoC: 80, power: 80 },
{ SoC: 89, power: 60 },
{ SoC: 90, power: 55 },
{ SoC: 100, power: 0 },
];
const [chargingCurveTableData, setChargingCurveTableData] = useState(
DEFAULT_CHARGING_CURVE,
);
<TableCell className={classes.tableCell}>
<TextField
inputProps={{
'aria-label': `chargingCurveTable Row ${i}, power`,
style: { textAlign: 'center' },
}}
type='number'
value={row.power}
onChange={(event) => updateChargingCurveTableRowPower(
i,
event.target.value,
)
}
></TextField>
</TableCell>
add to inputProps step value for precision
example:
const TestComponent = () => {
const [value, setValue] = useState(0)
return (
<TextField
inputProps={{
step: 0.1,
}}
variant="standard"
label="test"
value={value}
type="number"
onChange={(e) => {
setValue(e.target.value)
}}
/>
)
}
I have this version "@mui/material": "^5.8.4"