React Final Form 使用教程

React Final Form 使用教程

react-final-form🏁 High performance subscription-based form state management for React项目地址:https://gitcode.com/gh_mirrors/re/react-final-form

项目介绍

React Final Form 是一个高性能的订阅式表单状态管理库，适用于 React 应用。它基于 Final Form 库，使用观察者模式，确保只有需要更新的组件在表单状态变化时重新渲染。该库的主要特点包括零依赖（不影响你的包大小）、仅有的对等依赖（React 和 Final Form）、可选订阅（只更新你需要的状态）以及轻量级（压缩后仅 1.2 kB）。

项目快速启动

安装

首先，你需要安装 react-final-form 和 final-form：

npm install --save react-final-form final-form

或者使用 Yarn：

yarn add react-final-form final-form

基本使用

以下是一个简单的表单示例：

import React from 'react';
import { Form, Field } from 'react-final-form';

const SimpleForm = () => (
  <Form
    onSubmit={values => console.log(values)}
    initialValues={{ firstName: 'Bob' }}
    render={({ handleSubmit, form, submitting, pristine, values }) => (
      <form onSubmit={handleSubmit}>
        <Field name="firstName">
          {({ input }) => (
            <div>
              <label>First Name</label>
              <input {...input} type="text" placeholder="First Name" />
            </div>
          )}
        </Field>
        <button type="submit" disabled={submitting || pristine}>
          Submit
        </button>
      </form>
    )}
  />
);

export default SimpleForm;

应用案例和最佳实践

表单验证

React Final Form 支持自定义验证函数，可以在提交表单时进行验证：

import React from 'react';
import { Form, Field } from 'react-final-form';

const validate = values => {
  const errors = {};
  if (!values.firstName) {
    errors.firstName = 'Required';
  }
  return errors;
};

const ValidationForm = () => (
  <Form
    onSubmit={values => console.log(values)}
    validate={validate}
    render={({ handleSubmit, form, submitting, pristine, values }) => (
      <form onSubmit={handleSubmit}>
        <Field name="firstName">
          {({ input, meta }) => (
            <div>
              <label>First Name</label>
              <input {...input} type="text" placeholder="First Name" />
              {meta.error && meta.touched && <span>{meta.error}</span>}
            </div>
          )}
        </Field>
        <button type="submit" disabled={submitting || pristine}>
          Submit
        </button>
      </form>
    )}
  />
);

export default ValidationForm;

异步表单提交

React Final Form 支持异步表单提交，可以在提交函数中进行异步操作：

import React from 'react';
import { Form, Field } from 'react-final-form';

const asyncSubmit = async values => {
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log(values);
};

const AsyncForm = () => (
  <Form
    onSubmit={asyncSubmit}
    render={({ handleSubmit, form, submitting, pristine, values }) => (
      <form onSubmit={handleSubmit}>
        <Field name="firstName">
          {({ input }) => (
            <div>
              <label>First Name</label>
              <input {...input} type="text" placeholder="First Name" />
            </div>
          )}
        </Field>
        <button type="submit" disabled={submitting || pristine}>
          Submit
        </button>
      </form>
    )}
  />
);

export default AsyncForm;

典型生态项目

React Final Form Hooks

React Final Form Hooks 是一个轻量级的库，用于将 Final Form 连接到 React，实现基于订阅的表单状态管理。它使用观察者模式，但需要注意的是，它会重新渲染整个表单在每次状态变化时。如果性能是你的目标，建议使用 React Final Form。

react-final-form🏁 High performance subscription-based form state management for React项目地址:https://gitcode.com/gh_mirrors/re/react-final-form