@tcfuture/ant-design-formik

ant-design with formik

Usage

import { Button, Form, Radio } from 'antd';
import 'antd/dist/antd.css';
import { Formik } from 'formik';
import React from 'react';
import { Input, Select, Yup } from '@tcfuture/ant-design-formik';

const validationSchema = Yup.object({
  username: Yup.string()
    .trim()
    .required('请输入')
    .max(10, '最多10个字符')
    .min(3, '最少3个字符'),
  password: Yup.string()
    .trim()
    .required('请输入')
    .max(10, '最多10个字符')
    .min(6, '最少6个字符'),
  passwordConfirmation: Yup.string().oneOf(
    [Yup.ref('password'), null],
    '密码必须一致'
  ),
});

const App = () => (
  <Formik
    initialValues={{
      username: '',
      url: '',
      password: '',
      passwordConfirmation: '',
    }}
    validationSchema={validationSchema}
    onSubmit={values => {
      alert(JSON.stringify(values));
      console.log('onSubmit', values);
    }}
  >
    {({ handleSubmit }) => (
      <form onSubmit={handleSubmit}>
        <Form>
          <Input name="username" label="用户名" placeholder="请输入用户名" />
          <Input name="password" label="密码" placeholder="请输入密码" />
          <Input
            name="url"
            label="网站"
            placeholder="请输入域名"
            addonBefore="https://"
            addonAfter=".com"
            onChange={value => {
              console.log('====================================');
              console.log('onChange', value);
              console.log('====================================');
            }}
          />
          <Input
            name="passwordConfirmation"
            label="密码确认"
            placeholder="请再次输入密码"
          />
          <Select
            name="searchKey"
            label="searchKey"
            options={[
              {
                value: 'name',
                text: '产品名称',
              },
              {
                value: 'id',
                text: '产品ID',
              },
            ]}
          />
          <Button htmlType="submit" type="primary">
            提交
          </Button>
        </Form>
      </form>
    )}
  </Formik>
);

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

formik Build forms in React, without the tears 😭