Блог

Я использую react, но, похоже, не могу добавить выбранное select в формик из данных, ниже приведена моя форма :

 <Card.Body>
                
                    <Formik
                        validationSchema={signUpSchema}
                        onSubmit={handleSignUpAsync}
                        initialValues={{
                            firstName: '',
                            lastName: '',
                            emailAddress: '',
                            phoneNumber: '',
                            password: '',
                            countrySelector: '',
                            repeatedPassword: '',
                        }}
                    >
                        <Form>
                            <Row>
                                <Col xs={6}>
                                    <Input label="First Name" name="firstName" type="text" id="firstName" placeholder="Your first name..." />
                                </Col>
                                <Col xs={6}>
                                    <Input label="Last Name" name="lastName" type="text" id="lastName" placeholder="Your last name..." />
                                </Col>
                            </Row>
                            <Input label="E-Mail Address" name="emailAddress" type="email" id="emailAddress" placeholder="Your e-mail address..." />
                            <Input label="Phone Number (optional)" name="phoneNumber" type="tel" placeholder="Your phone number..." />
                            <select name="Select country" className="browser-default custom-select" name='countrySelector'>
                                <option>Select Country</option>
                                <option value="DW">DE</option>
                                <option value="US">US</option>
                            </select>

                            <Row>
                                <Col xs={6}>
                                    <Input label="Password" name="password" type="password" placeholder="Your password..." />
                                </Col>
                                <Col xs={6}>
                                    <Input label="Repeat Password" name="repeatedPassword" type="password" placeholder="Your password repeated..." />
                                </Col>
                            </Row>
                            <div className="text-center">
                                <Button variant="primary" type="submit">
                                    Sign-up now
                                </Button>
                                <p>
                                    ...or <Link to={APP_ROUTES.LOGIN}>log-in</Link>
                                </p>
                            </div>
                        </Form>
                    </Formik>
                </Card.Body>
 

Выше приведены данные моей формы, поэтому я хотел добавить значение selectd из select :

 <select name="Select country" className="browser-default custom-select" name='countrySelector'>
                                <option>Select Country</option>
                                <option value="DW">DE</option>
                                <option value="US">US</option>
                            </select>
 

Вы должны использовать <Field as="select" name="countrySelector"/> . <Field/> автоматически подключит входы к формику. Он использует атрибут name для сопоставления с Formik состоянием.

 import { Field, Form, Formik } from 'formik';

<Field
  as="select"
  name="countrySelector"
  className="browser-default custom-select"
>
  <option>Select Country</option>
  <option value="DW">DE</option>
  <option value="US">US</option>
</Field>