为什么在Formik中无法获取Date与Text Area组件的输入值？

问题根因 #

你的代码存在两个核心问题导致日期、文本域值无法正常同步：

1. Formik 渲染回调的参数没有正确暴露handleChange方法：你代码中回调只解构了values和setFieldValue，后续使用的formik.handleChange对应的formik对象未定义，变更事件根本没有触发Formik的数值更新。
2. Semantic UI 自定义组件的事件回调格式和原生DOM元素不同，TextArea的变更回调是(event, data)的结构，直接调用默认handleChange无法正确读取输入值。

解决方法 #

调整Formik回调参数的解构逻辑，并且给日期输入、文本域配置和Dropdown一致的setFieldValue赋值逻辑即可，修改后的代码参考：

return (
<div>
  <Card fluid>
    <Card.Content>
      <Card.Header>创建新招聘广告</Card.Header>
      <Divider inverted />
      <Formik
        initialValues={initialValues}
        validationSchema={jobAdCreateSchema}
        onSubmit={(values) => {
          handleSubmit(values);
        }}
      >
        {/* 这里直接解构整个formik对象，获取所有内置方法 */}
        {(formik) => (
          <div>
            <pre>{JSON.stringify(formik.values, undefined, 2)}</pre>
            {/* 给Semantic UI的Form绑定Formik的提交处理方法 */}
            <Form className="ui form" onSubmit={formik.handleSubmit}>
              <FormField>
                <label>岗位名称</label>
                <Dropdown
                  selection
                  placeholder="选择岗位名称"
                  name="jobTitle"
                  fluid
                  options={jobTitleOption}
                  value={formik.values.jobTitle.id}
                  onChange={(_, { value }) =>
                    formik.setFieldValue("jobTitle.id", value)
                  }
                />
              </FormField>
              <FormField>
                <label>申请截止日期</label>
                <input
                  name="deadline"
                  style={{ width: "100%" }}
                  type="date"
                  placeholder="申请截止日期"
                  value={formik.values.deadline}
                  {/* 原生输入框直接从event.target取value赋值 */}
                  onChange={(e) => formik.setFieldValue("deadline", e.target.value)}
                />
              </FormField>
              <FormField>
                <label>岗位描述</label>
                <TextArea
                  name="description"
                  placeholder="岗位描述"
                  style={{ minHeight: 100 }}
                  value={formik.values.description}
                  {/* Semantic UI组件从回调第二个参数取value赋值 */}
                  onChange={(_, { value }) => formik.setFieldValue("description", value)}
                />
              </FormField>
              <FormField>
                <Button color="green" type="submit">
                  提交
                </Button>
              </FormField>
            </Form>
          </div>
        )}
      </Formik>
    </Card.Content>
  </Card>
</div>
);

如果你不想统一用setFieldValue，也可以把handleChange从Formik回调中解构出来，原生日期输入框可以直接用onChange={handleChange}，但TextArea还是需要单独适配回调参数。

内容的提问来源于stack exchange，提问作者conqueror