开源项目 Formous 使用教程

开源项目 Formous 使用教程

formousSimple and elegant form-handling for React - ABANDONWARE项目地址:https://gitcode.com/gh_mirrors/fo/formous

项目介绍

Formous 是一个用于简化表单处理的 React 库，它提供了一种直观的方式来管理表单状态和验证。Formous 的设计目标是使表单处理更加简洁和高效，同时保持灵活性和可扩展性。

项目快速启动

安装

首先，你需要通过 npm 或 yarn 安装 Formous：

npm install formous

或者

yarn add formous

基本使用

以下是一个简单的示例，展示如何使用 Formous 创建一个基本的表单：

import React from 'react';
import { Form, Field } from 'formous';

const BasicForm = () => {
  const onSubmit = (values) => {
    console.log('Form values:', values);
  };

  return (
    <Form onSubmit={onSubmit}>
      <Field name="username" label="Username" />
      <Field name="password" label="Password" type="password" />
      <button type="submit">Submit</button>
    </Form>
  );
};

export default BasicForm;

应用案例和最佳实践

表单验证

Formous 支持自定义验证规则，以下是一个带有自定义验证的示例：

import React from 'react';
import { Form, Field } from 'formous';

const ValidationForm = () => {
  const onSubmit = (values) => {
    console.log('Form values:', values);
  };

  const validate = (values) => {
    const errors = {};
    if (!values.username) {
      errors.username = 'Username is required';
    }
    if (!values.password) {
      errors.password = 'Password is required';
    }
    return errors;
  };

  return (
    <Form onSubmit={onSubmit} validate={validate}>
      <Field name="username" label="Username" />
      <Field name="password" label="Password" type="password" />
      <button type="submit">Submit</button>
    </Form>
  );
};

export default ValidationForm;

动态表单

Formous 也支持动态添加和移除表单字段，以下是一个动态表单的示例：

import React, { useState } from 'react';
import { Form, Field } from 'formous';

const DynamicForm = () => {
  const [fields, setFields] = useState([{ name: 'field1', label: 'Field 1' }]);

  const onSubmit = (values) => {
    console.log('Form values:', values);
  };

  const addField = () => {
    const newField = {
      name: `field${fields.length + 1}`,
      label: `Field ${fields.length + 1}`,
    };
    setFields([...fields, newField]);
  };

  return (
    <Form onSubmit={onSubmit}>
      {fields.map((field) => (
        <Field key={field.name} name={field.name} label={field.label} />
      ))}
      <button type="button" onClick={addField}>Add Field</button>
      <button type="submit">Submit</button>
    </Form>
  );
};

export default DynamicForm;

典型生态项目

React Router 集成

Formous 可以与 React Router 集成，以便在不同的路由中使用表单。以下是一个简单的集成示例：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Form, Field } from 'formous';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/form" component={FormComponent} />
      </Switch>
    </Router>
  );
};

const FormComponent = () => {
  const onSubmit = (values) => {
    console.log('Form values:', values);
  };

  return (
    <Form onSubmit={onSubmit}>
      <Field name="username" label="Username" />
      <Field name="password" label="Password" type="password

formousSimple and elegant form-handling for React - ABANDONWARE项目地址:https://gitcode.com/gh_mirrors/fo/formous