为什么我不能在Formik中获取日期和文本区域的值？ [英] Why can't I get values of Date and Text Area in Formik?

问题描述

我使用Formik和Yup作为Reaction应用程序中的表单控件。我还使用了语义用户界面。在应用程序中，当我单击Submit按钮时，虽然我可以从Formfield元素中读取值并在控制台上看到它们，但我无法获取日期和文本区域元素的值，并且它们在控制台上显示为空白。我怎样才能解决这个问题？

在这里我定义初始值。

const initialValues = {
jobTitle: { id: "" },
deadline: "",
description: "",

}；

然后，我尝试从表单元素中获取值

return (
<div>
  <Card fluid>
    <Card.Content>
      <Card.Header>Create A New Job Ad</Card.Header>
      <Divider inverted />
      <Formik
        initialValues={initialValues}
        validationSchema={jobAdCreateSchema}
        onSubmit={(values) => {
          handleSubmit(values);
        }}
      >
        {({ values, setFieldValue }) => (
          <div>
            <pre>{JSON.stringify(values, undefined, 2)}</pre>

            <Form className="ui form">
              <FormField>
                <label>Job Title</label>
                <Dropdown
                  selection
                  placeholder="Select a Job Title"
                  name="jobTitle"
                  fluid
                  options={jobTitleOption}
                  value={values.jobTitle.id}
                  onChange={(_, { value }) =>
                    setFieldValue("jobTitle.id", value)
                  }
                />
              </FormField>
              <FormField>
                <label>Application Deadline</label>
                <input
                  name="deadline"
                  style={{ width: "100%" }}
                  type="date"
                  placeholder="Application Deadline"
                  value={values.deadline}
                  onChange={formik.handleChange}
                />
              </FormField>
              <FormField>
                <label>Job Description</label>
                <TextArea
                  name="description"
                  placeholder="Job Description"
                  style={{ minHeight: 100 }}
                  value={values.description}
                  onChange={formik.handleChange}
                />
              </FormField>
              <FormField>
                <Button color="green" type="submit">
                  Submit
                </Button>
              </FormField>
            </Form>
          </div>
        )}
      </Formik>
    </Card.Content>
  </Card>
</div>

)；

推荐答案

formik未定义，因此您分配的onChange函数不存在。

从参数中分解handleChange，然后将其分配给输入，如下所示：

{({ values, setFieldValue, handleChange }) => (
  //...

  <input
    name="deadline"
    style={{ width: "100%" }}
    type="date"
    placeholder="Application Deadline"
    value={values.deadline}
    onChange={handleChange}
  />
)}

Live demo

这篇关于为什么我不能在Formik中获取日期和文本区域的值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！