Formik 和 Form.Check 没有捕获价值

Question

我正在利用 Formik 和 React-Bootstrap 构建用户注册表。现在，我只是 console.logging 从表单中捕获的值，但出于某种原因，我的表单没有从元素中捕获值。

我真的很感激任何帮助，因为我已经苦苦挣扎了几个小时！

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: "davekula@gmail.com", password: "ddhshja", role: "user", secondary interest: [],...}

Answer 1

这部分实际上什么都不做。实际上你想做的是，当你设置复选标记时，它应该将它添加到 secondaryinterest 数组中。但是你没有给出说明，福米克也猜不到。

 {['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

我能够修复它并考虑 post 答案以防它在后期帮助其他人

{['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('secondaryinterest')} 也是多余的。

Formik 和 Form.Check 没有捕获价值

Formik and Form.Check does not capture value

reactjs

react-bootstrap

formik