Estoy tratando de implementar un campo de texto que solo permita números del 0 al 99. Si el usuario ingresa un número negativo o mayor que 99, quiero que el campo de texto se restablezca a 0. Aquí está mi código:
import * as React from "react"; import TextField from "@mui/material/TextField"; export default function TestForm() { return ( <React.Fragment> <TextField required id="field1" name="field1" label="How Many" fullWidth type="number" defaultValue="0" variant="standard" onChange={function (event) { if (event.target.value < 0 || event.target.value > 99) { event.target.setValue("0"); } }} /> </React.Fragment> ); }Cuando ejecuto esto en CodeSandbox, aparece el siguiente error:
event.target.setValue is not a functionCualquier consejo sería apreciado.
No estoy familiarizado con una propiedad setValue en un elemento de entrada. Pero la forma de reaccionar para hacerlo es mantener el valor en el estado local usando useState y hacer que TextField sea un elemento controlado agregando el value prop.
export default function TestForm() { const [value, setValue] = React.useState(0) return ( <TextField value={value} onChange={function (event) { if (event.target.value < 0 || event.target.value > 99) { setValue("0"); } else { setValue(event.target.value) } }} /> ); }En react necesitas almacenar el valor de entrada en el estado
Prueba este código, te ayudará.
import React, { useState } from "react" function App() { const [state, setState] = useState(''); const handleChange = (event) => { if (event.target.value < 0 || event.target.value > 99) { setState(event.target.value); } } return ( <> <React.Fragment> <TextField required id="field1" name="field1" label="How Many" fullWidth type="number" defaultValue="0" variant="standard" value={state} onChange={(e) => handleChange(e)} /> </React.Fragment> </> ); } export default App;