formik and form。检查不捕获价值

Question

我正在利用Formik和React-Bootstrap来构建用户注册表格。就目前而言，我只是台式。元素。

我非常感谢任何帮助，因为我一直在挣扎几个小时！

const Register = () => {
const formik = useFormik({
    initialValues: {
        firstname: '',
        surname: '',
        email: '',
        password: '',
        role: 'user',
        secondaryinterest: [''],
    },
    validationSchema: Yup.object({
        firstname: Yup.string()
        .min(2, 'Your name is too short')
        .max(100, 'Your name is too long')
        .required('We require your name'),
        surname: Yup.string()
        .min(2, 'Your name is too short')
        .max(100, 'Your name is too long')
        .required('We require your name'),
        email:Yup.string()
        .required('Sorry the email is required')
        .email('This is not a valid email'),
        password:Yup.string()
        .required('Sorry the password is required'),
        secondaryinterest: Yup.array()
        .min(1, "You need to select at least one"),           
    }),
    onSubmit:(values) => {
        console.log(values)
    }
})

return(
    <Form onSubmit={formik.handleSubmit}>
        <Form.Group>
        <Form.Label>Select the five most relevant for you</Form.Label>
            {['Football', 'Golf', 'Rugby', 'Tennis'].map((secondaryinterest) => (
                <div key={`${secondaryinterest}`} className="mb-3">
                    <Form.Check
                        type='checkbox'
                        name='secondaryinterest'
                        placeholder="secondaryinterest"
                        id={`${secondaryinterest}`}
                        label={`${secondaryinterest}`}
                        onChange={formik.handleChange}
                        {...formik.getFieldProps('secondaryinterest')}
                    />
                </div>
            ))}
        </Form.Group>
        <Row className="mb-3">
            <Form.Group as={Col} controlId="formGridFirstname">
                <Form.Label>First Name</Form.Label>
                <Form.Control 
                    type="text"
                    name="firstname"
                    variant="outlined"
                    {...formik.getFieldProps('firstname')}
                />
                {formik.touched.firstname && formik.errors.firstname ? (
                    <div>{formik.errors.firstname}</div>
                ) : null}

            </Form.Group>
            <Form.Group as={Col} controlId="formGridSurname">
                <Form.Label>Last Name</Form.Label>
                <Form.Control 
                    type="text"
                    name="surname"
                    variant="outlined"
                    {...formik.getFieldProps('surname')}
                />
                {formik.touched.surname && formik.errors.surname ? (
                    <div>{formik.errors.surname}</div>
                ) : null}
            </Form.Group>
        </Row>
        <Row className="mb-3">
            <Form.Group as={Col} controlId="formGridEmail">
                <Form.Label>E-mail</Form.Label>
                <Form.Control
                    type="email"
                    name="email"
                    variant="outlined"
                    {...formik.getFieldProps('email')}
                />
                {formik.touched.email && formik.errors.email ? (
                    <div>{formik.errors.email}</div>
                ) : null}
            </Form.Group>
            <Form.Group as={Col} controlId="formGridPassword">
                <Form.Label>Enter your password</Form.Label>
                <Form.Control
                    type="password"
                    name="password"
                    variant="outlined"
                    {...formik.getFieldProps('password')}
                />
                {formik.touched.password && formik.errors.password ? (
                    <div>{formik.errors.password}</div>
                ) : null}
            </Form.Group>
        </Row>
        <Button variant="primary" type="submit">
            Register
        </Button>
        
    </Form>
}

控制台日志输出是：

{firstname: "Dave", surname: "Kula", email: "[email protected]", password: "ddhshja", role: "user", secondary interest: [],...}

Answer 1

实际上，这部分没有任何作用。您想做的实际要做的事情，当您设置检查标记时，它应将其添加到Secondaryest的数组中。但是，您没有提供指示，而Formik不能只是猜测。

 {['Football', 'Golf', 'Rugby', 'Tennis'].map((secondaryinterest) => (
                <div key={`${secondaryinterest}`} className="mb-3">
                    <Form.Check
                        type='checkbox'
                        name='secondaryinterest'
                        placeholder="secondaryinterest"
                        id={`${secondaryinterest}`}
                        label={`${secondaryinterest}`}
                        onChange={formik.handleChange}
                        {...formik.getFieldProps('secondaryinterest')}
                    />
                </div>
            ))}

我建议您更轻松地为您创建每个复选框的新初始值。使它们分开。

Answer 2

我能够修复它，并想到答案，以防它帮助其他人AA后期

{['Football', 'Golf', 'Rugby', 'Tennis'].map((secondaryinterest) => (
            <div key={`${secondaryinterest}`} className="mb-3">
                <Form.Check
                    type='checkbox'
                    name='secondaryinterest'
                    value={`${secondaryinterest}`}
                    label={`${secondaryinterest}`}
                    onChange={formik.handleChange}
                />
            </div>
        ))}

我规定了名称和价值字段。 {... formik.getFieldProps（'SecontaryEnterest'）}也是多余的。