Formik-Antd 使用教程

Formik-Antd 使用教程

formik-antdSimple declarative bindings for Ant Design and Formik.项目地址:https://gitcode.com/gh_mirrors/fo/formik-antd

项目介绍

Formik-Antd 是一个开源项目，旨在为 Ant Design 和 Formik 提供简单的声明式绑定。通过这个库，你可以轻松地将 Ant Design 的组件与 Formik 表单字段连接起来。这意味着你不再需要从 antd 导入表单组件，而是从 formik-antd 导入，并设置它们的 name 属性。这样，组件就会与相应的 Formik 字段同步。

项目快速启动

安装

首先，你需要安装 formik-antd 和 antd：

npm install formik-antd antd

引入样式

在你的入口文件（通常是 index.js 或 index.tsx）中引入 Ant Design 的样式：

import 'antd/dist/antd.css';

基本示例

以下是一个基本的示例，展示了如何使用 formik-antd 创建一个表单：

import React from 'react';
import { Form, Input, InputNumber, Checkbox } from 'formik-antd';
import { Formik } from 'formik';

function App() {
  return (
    <Formik
      initialValues={{ firstName: '', age: 20, newsletter: false }}
      onSubmit={(values) => {
        console.log(values);
      }}
    >
      {({ handleSubmit }) => (
        <Form onSubmit={handleSubmit}>
          <Input name="firstName" placeholder="First Name" />
          <InputNumber name="age" min={0} />
          <Checkbox name="newsletter">Newsletter</Checkbox>
        </Form>
      )}
    </Formik>
  );
}

export default App;

应用案例和最佳实践

表单验证

Formik 提供了强大的表单验证功能。你可以通过 validate 属性来定义验证规则：

import React from 'react';
import { Form, Input, InputNumber, Checkbox } from 'formik-antd';
import { Formik } from 'formik';

function App() {
  const validate = (values) => {
    const errors = {};
    if (!values.firstName) {
      errors.firstName = 'Required';
    }
    if (values.age < 0) {
      errors.age = 'Age must be positive';
    }
    return errors;
  };

  return (
    <Formik
      initialValues={{ firstName: '', age: 20, newsletter: false }}
      onSubmit={(values) => {
        console.log(values);
      }}
      validate={validate}
    >
      {({ handleSubmit }) => (
        <Form onSubmit={handleSubmit}>
          <Input name="firstName" placeholder="First Name" />
          <InputNumber name="age" min={0} />
          <Checkbox name="newsletter">Newsletter</Checkbox>
        </Form>
      )}
    </Formik>
  );
}

export default App;

动态表单

Formik 支持动态表单字段。你可以使用 FieldArray 组件来实现这一点：

import React from 'react';
import { Form, Input, FieldArray } from 'formik-antd';
import { Formik } from 'formik';

function App() {
  return (
    <Formik
      initialValues={{ friends: [''] }}
      onSubmit={(values) => {
        console.log(values);
      }}
    >
      {({ handleSubmit }) => (
        <Form onSubmit={handleSubmit}>
          <FieldArray name="friends">
            {({ insert, remove, push }) => (
              <div>
                {values.friends.length > 0 &&
                  values.friends.map((friend, index) => (
                    <div key={index}>
                      <Input name={`friends.${index}`} placeholder="Friend's Name" />
                      <button type="button" onClick={() => remove(index)}>
                        Remove
                      </button>
                    </div>
                  ))}
                <button type="button" onClick={() => push('')}>
                  Add Friend
                </button>
             

formik-antdSimple declarative bindings for Ant Design and Formik.项目地址:https://gitcode.com/gh_mirrors/fo/formik-antd