React-Component/Form 开源项目教程

React-Component/Form 开源项目教程

formReact High Order Form Component(web & react-native)项目地址:https://gitcode.com/gh_mirrors/form2/form

项目介绍

React-Component/Form 是一个基于 React 的开源表单组件库，旨在简化表单的创建和管理。该库提供了丰富的 API 和组件，使得开发者能够快速构建功能强大的表单，同时保持代码的简洁和可维护性。

项目快速启动

安装

首先，你需要在你的项目中安装 @react-component/form 包。你可以使用 npm 或 yarn 进行安装：

npm install @react-component/form

或者

yarn add @react-component/form

基本使用

以下是一个简单的示例，展示如何使用 React-Component/Form 创建一个基本的表单：

import React from 'react';
import { Form, Input, Button } from '@react-component/form';

const BasicForm = () => {
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  return (
    <Form onFinish={onFinish}>
      <Form.Item name="username" label="用户名" rules={[{ required: true, message: '请输入用户名!' }]}>
        <Input />
      </Form.Item>
      <Form.Item name="password" label="密码" rules={[{ required: true, message: '请输入密码!' }]}>
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default BasicForm;

应用案例和最佳实践

动态表单

React-Component/Form 支持动态添加和删除表单项。以下是一个动态表单的示例：

import React from 'react';
import { Form, Input, Button } from '@react-component/form';

const DynamicForm = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  const addField = () => {
    const fields = form.getFieldValue('fields') || [];
    form.setFieldsValue({
      fields: [...fields, {}]
    });
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.List name="fields">
        {(fields, { add, remove }) => (
          <>
            {fields.map((field, index) => (
              <Form.Item key={field.key} label={`Field ${index + 1}`}>
                <Form.Item {...field} noStyle>
                  <Input />
                </Form.Item>
                <Button onClick={() => remove(field.name)}>删除</Button>
              </Form.Item>
            ))}
            <Form.Item>
              <Button type="dashed" onClick={() => add()}>
                添加字段
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default DynamicForm;

表单验证

React-Component/Form 提供了强大的表单验证功能。以下是一个包含自定义验证规则的示例：

import React from 'react';
import { Form, Input, Button } from '@react-component/form';

const CustomValidationForm = () => {
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  const validatePassword = (rule, value) => {
    if (value && value.length < 6) {
      return Promise.reject('密码必须至少包含6个字符');
    }
    return Promise.resolve();
  };

  return (
    <Form onFinish={onFinish}>
      <Form.Item name="username" label="用户名" rules={[{ required: true, message: '请输入用户名!' }]}>
        <Input />
      </Form.

formReact High Order Form Component(web & react-native)项目地址:https://gitcode.com/gh_mirrors/form2/form