I'm converting the forms in an app from Formik to React Hook Form. Some of the forms are of the CRUD variety and contain fields that are strings and booleans. The booleans are represented in the form using checkboxes. The initial values for these strings and booleans come from a database record and are injected into the form using the initialValues / defaultValues feature of Formik / RHF. Everything worked perfectly in RHF version 5.7.2. However, when I upgraded to version 6.14.0 the checkboxes display as unchecked no matter what value is set as the initial value. Here is the RHF example from their website that I modified to reproduce the problem.
import React from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import { useForm, Controller } from 'react-hook-form';
const useStyles = makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(8),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%', // Fix IE 11 issue.
marginTop: theme.spacing(1),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));
export default function SignIn() {
const classes = useStyles();
const { register, handleSubmit, control } = useForm({
defaultValues: { email: 'email@email.net', password: 'password', remember: true },
});
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<form className={classes.form} noValidate onSubmit={handleSubmit((data) => alert(JSON.stringify(data)))}>
<TextField
variant="outlined"
margin="normal"
inputRef={register}
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
autoFocus
/>
<TextField
variant="outlined"
margin="normal"
inputRef={register}
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
<FormControlLabel
control={<Controller as={Checkbox} control={control} name="remember" color="primary" />}
label="Remember me"
/>
<Button type="submit" fullWidth variant="contained" color="primary" className={classes.submit}>
Sign In
</Button>
<Grid container>
<Grid item xs>
<Link href="#" variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item>
<Link href="#" variant="body2">
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
</form>
</div>
</Container>
);
}
If this code is run under RHF version 5.7.2, the remember checkbox will be checked on the first render. Under RHF version 6.14.0 the checkbox is clear. Is this a problem with the latest version of RHF, or do I need to initialize checkboxes in a different way?
Aucun commentaire:
Enregistrer un commentaire