I'm trying to set a maximum input value in a text field, but can't seem to get it working.
I've got 2 onChange's and values which I think is the problem. Not sure a way around this
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();
};
then I have my return statement which has the 2 onchanges and values
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>
);
}
You may also interact with my demo in the CodeSandbox
Delete:
- const string = prev.length <= 10 ? maxvalue : maxvalue.substring(0, 10);
- return string;
Add:
+ return maxvalue.substring(0, 11);
You can merge 2 handlers like this:
<TextField
onChange={(e) => {
setNumber(e.target.value);
handler(e);
}}
value={number}
onChange={handler}
value={maxvalue}
/>
If you run this code:
<TextField
onChange={(e) => {setNumber(e.target.value)}}
onChange={handler}
Then the onChange prop below will override the above