时间戳

首页 > 解决方案 > 为什么我不能在 React 中读取 Formik 的下拉值？

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

问题描述

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

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

标签： reactjsdropdownsemantic-uiformikyup

解决方案

问题在于Dropdown当前呈现组件的方式。您需要利用setFieldValueFormik 提供的手动更新 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>{values.pet1}</div>
      </div>
    )}
  </Formik>

工作沙箱

推荐阅读