Formik 无法从 select 中选取 selected 值

Question

我正在使用 React，但我似乎无法在 formik fromData 中添加 selected 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>

以上是我的表单数据，所以我想从 select 添加一个 selectd 值：

<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>

Answer 1

您必须使用 <Field as="select" name="countrySelector"/>。 <Field/> 会自动将输入连接到 Formik。它使用名称属性来匹配 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>

Formik 无法从 select 中选取 selected 值

Formik can't pick selected value from select

select

ecmascript-6

reactjs

formik