I ve got a form consisits of two inputs (emain, password) and one checkbox. Code is here:
<Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
<TextField
margin="normal"
required
fullWidth
id="email"
label="Email adress"
name="email"
autoComplete="email"
autoFocus
/>
<TextField
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<Button
type="submit"
fullWidth
variant="contained"
sx={{ mt: 3, mb: 2 }}
>
Sign in
</Button>
</Box>
To get the values of Email and Password I use smth.like:
const handleSubmit = (event) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
console.log({
email: data.get('email'),
password: data.get('password'),
});
};
But what’s the best practice to get the value of checkbox “Remember me” (in FormControlLabel)? Of course, I can make a new function to handle the changes of checkbox like:
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
onChanges = {newFunction}
label="Remember me"
/>
But I think that’s it’s not a good idea, because I don’t need to get all the changes of this checkbox, I just need to know the value of this checkbox in the moment of submitting the form.