为什么我不能在 React 中读取 Formik 的下拉列表值？

Question

我在react应用程序中使用Formik和Yup作为表单控件。我也使用语义UI。在应用程序中，当我单击提交按钮时，虽然我可以从FormField元素中读取值并在控制台上看到它们，但我无法从Dropdown元素中获取值，并且它们在控制台上显示为空白。我怎么解决这个问题?

return (
<div>
<Card fluid>
<Card.Content>
<Card.Header>Create A New Job Ad</Card.Header>
<Divider inverted />
<Formik
initialValues={initialValues}
validationSchema={jobAdCreateSchema}
onSubmit={(values) => {
console.log(values);
}}
>
<Form className="ui form">
<label>Job Title</label>
<FormField>
<Field name="jobTitle" placeholder="Select a Job Title"></Field>
</FormField>
<FormField>
<label>City</label>
<Dropdown
name="city"
placeholder="Select a City"
fluid
selection
options={cityOption}
/>
</FormField>
<FormField>
<Button color="green" type="submit">
Submit
</Button>
</FormField>
</Form>
</Formik>
</Card.Content>
</Card>
</div>
);

Answer 1

问题是Dropdown组件当前呈现的方式。您需要使用Formik提供的setFieldValue手动更新Formik状态。

<Formik
initialValues={{
city: ""
}}
onSubmit={(values) => console.log(values)}
>
{({ values, setFieldValue }) => (
<div>
<pre>{JSON.stringify(values, undefined, 2)}</pre>
<Dropdown
selection
placeholder="Select a City"
options={[
{ value: "NY", text: "New York" },
{ value: "LA", text: "Los Angeles" },
{ value: "SF", text: "San Fransico" }
]}
value={values.city}
onChange={(value) => setFieldValue("city", value)}
/>
</div>
)}
</Formik>

工作沙箱