Antd Design Form 如何使用formik？

Question

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

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 对象。

Answer 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>

Answer 2

终于有答案了！！当我们使用 Ant 设计形式时，它的工作方式与普通形式有点不同，我们必须使用 onFinish 而不是使用 onSubmit 并且通常你传递 value 和函数来捕获 event.target.value 在正常形式中，但在 Ant 设计形式中，我们必须传递 onChange={(value) => formik.setFieldValue("checkIn", value)}，它会简单地捕获变化。

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

Antd Design Form 如何使用formik？

How to use formik with Antd Design Form?

reactjs

antd

formik