Estoy tratando de establecer un valor de entrada máximo en un campo de texto, pero parece que no puedo hacerlo funcionar.
Tengo 2 onChange y valores que creo que son el problema. No estoy seguro de una forma de evitar esto
function Form({ onAddStudent }) { const [open, setOpen] = React.useState(false); const [number, setNumber] = React.useState(null); const handleClose = () => setOpen(false); const [maxnumber, setMaxNumber] = useState(""); const handler = (event) => { const maxvalue = event.target.value; const setMaxValue = maxvalue <= 10 ? maxvalue : maxnumber; setMaxNumber(setSetValue); }; const handleAdd = () => { onAddStudent(number); handleClose(); };luego tengo mi declaración de devolución que tiene los 2 cambios y valores
return ( <div> <Button variant="contained" size ="small" fontSize="large" onClick={() => setOpen(true)}> </Button> <Dialog open={open} onClose={handleClose}> <DialogTitle>Number of Students</DialogTitle> <DialogContent> <DialogContentText>Students to Add:</DialogContentText> <TextField onChange={(e) => {setNumber(e.target.value)}} value={number} onChange={handler} value={maxvalue} /> </DialogContent> <DialogActions> <Button onClick={handleClose}>Cancel</Button> <Button onClick={handleAdd}>Add</Button> </DialogActions> </Dialog> </div> ); }function Form({ onAddStudent }) { const [open, setOpen] = useState(false); const handleClose = () => setOpen(false); const [maxnumber, setMaxNumber] = useState(""); const handler = (event) => { const maxvalue = event.target.value; setMaxNumber((prev) => { // only allow 11 characters return maxvalue.substring(0, 11); }); }; const handleAdd = () => { onAddStudent(maxnumber); handleClose(); }; return ( <div> <Button variant="contained" size="small" fontSize="large" onClick={() => setOpen(true)} > Open </Button> <Dialog open={open} onClose={handleClose}> <DialogTitle>Number of Students</DialogTitle> <DialogContent> <DialogContentText>Students to Add:</DialogContentText> <TextField onChange={handler} value={maxnumber} /> </DialogContent> <DialogActions> <Button onClick={handleClose}>Cancel</Button> <Button onClick={handleAdd}>Add</Button> </DialogActions> </Dialog> </div> ); }También puede interactuar con mi demostración en CodeSandbox
Borrar:
- const string = prev.length <= 10 ? maxvalue : maxvalue.substring(0, 10); - return string;Agregar:
+ return maxvalue.substring(0, 11);Puede fusionar 2 controladores como este:
<TextField onChange={(e) => { setNumber(e.target.value); handler(e); }} value={number} onChange={handler} value={maxvalue} />Si ejecuta este código:
<TextField onChange={(e) => {setNumber(e.target.value)}} onChange={handler} Luego, el accesorio onChange a continuación anulará el anterior