如何在 Antd Design Form 中使用 formik？答案

【问题标题】：How to use formik with Antd Design Form?如何在 Antd Design Form 中使用 formik？
【发布时间】：2021-08-02 05:11:56
【问题描述】：

我正在尝试使用 Ant 设计表单实现 formik 验证，formik 能够捕获输入/选定的数据，但是当我单击提交时，它不会在控制台中打印任何内容。

export default function SearchForm() {
  const formik = useFormik({
    initialValues: {
      city: "",
      checkIn: "",
    },
    onSubmit: (values) => {
      console.log(values)
    },
  });

  //console.log(formik.values)

  return (
    <Form onSubmit={formik.handleSubmit}>
      <FormLabel>Select City</FormLabel>
      <Form.Item>
        <Select
          name="city"
          value={formik.values.city}
          placeholder="Please select a country"
          onChange={(value) => formik.setFieldValue("city", value)}
        >
          <Select.Option value="mumbai">Mumbai</Select.Option>
          <Select.Option value="bengaluru">Bengaluru</Select.Option>
          <Select.Option value="delhi">Delhi</Select.Option>
          <Select.Option value="hyderabad">Hyderabad</Select.Option>
          <Select.Option value="chennai">Chennai</Select.Option>
        </Select>
      </Form.Item>
      <FormLabel>Check-In-Date</FormLabel>
       <Form.Item>
         <DatePicker
           name="checkIn"
           value={formik.values.checkIn}
           format={dateFormat}
           onChange={(value) => formik.setFieldValue("checkIn", value)}
           />
       </Form.Item>
      <SubmitButton htmlType="submit">Book Now</SubmitButton>
    </Form>
  );
}

并且通过给定值，占位符文本是不可见的，并且在 DatePicker 中，它也被保存为 Moment 对象。

【问题讨论】：

标签： reactjs antd formik

【解决方案1】：

您可以在useFormik 中添加Validation Schema 并导入Yup，如下所示：

import * as Yup from 'yup';

const FormSchema = Yup.object().shape({
    title: Yup.string().required('Please enter notification title')
});

<Formik
    validationSchema={FormSchema}>
        <Form>
            <div className='grid-row'>
                <div className='grid-1'>
                    <Field name='title' required={true} label='Title'component={Input} />
                </div>
        </Form>
</Formik>

【讨论】：

我理解，但第一部分我想在提交时进行控制台

【解决方案2】：

终于有答案了！！当我们使用 Ant 设计形式时，它的工作方式与普通形式略有不同，我们必须使用 onFinish 而不是使用onFinish，通常您通过value 和函数以普通形式捕获event.target.value，但在我们必须通过 onChange={(value) => formik.setFieldValue("checkIn", value)} 的 Ant 设计表单，它会简单地捕获更改。

<Form onFinish={formik.handleSubmit}>
      <FormLabel>Select City</FormLabel>
      <Form.Item>
        <Select
          name="city"
          placeholder="Please select a country"
          onChange={(value) => formik.setFieldValue("city", value)}
        >
          <Select.Option value="mumbai">Mumbai</Select.Option>
          <Select.Option value="bengaluru">Bengaluru</Select.Option>
          <Select.Option value="delhi">Delhi</Select.Option>
          <Select.Option value="hyderabad">Hyderabad</Select.Option>
          <Select.Option value="chennai">Chennai</Select.Option>
        </Select>
      </Form.Item>
      <FormLabel>Check-In-Date</FormLabel>
       <Form.Item>
         <DatePicker
           name="checkIn"
           format={dateFormat}
           onChange={(value) => formik.setFieldValue("checkIn", value)}
           />
      </Form.Item>
      <SubmitButton htmlType="submit">Book Now</SubmitButton>
    </Form>

【讨论】：