三、安装与快速入门

3.1 安装

# 安装核心库
npm install final-form

# 安装 React 绑定
npm install react-final-form

3.2 最简示例

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

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

const onSubmit = async values => {
  await sleep(300);
  window.alert(JSON.stringify(values, 0, 2));
};

const required = value => (value ? undefined : '此项为必填项');

const App = () => (
  <Form
    onSubmit={onSubmit}
    initialValues={
  { username: 'admin' }}
    render={({ handleSubmit, form, submitting, pristine, values }) => (
      <form onSubmit={handleSubmit}>
        <div>
          <label>用户名</label>
          <Field name="username" validate={required}>
            {({ input, meta }) => (
              <div>
                <input {...input} type="text" placeholder="用户名" />
                {meta.error && meta.touched && <span>{meta.error}</span>}
              </div>
            )}
          </Field>
        </div>
        <div>
          <label>密码</label>
          <Field name="password" validate={required}>
            {({ input, meta }) => (
              <div>
                <input {...input} type="password" placeholder="密码" />
                {meta.error && meta.touched && <span>{meta.error}</span>}
              </div>
            )}
          </Field>
        </div>
        <button type="submit" disabled={submitting}>提交</button>
      </form>
    )}
  />
);

四、核心 API 详解

4.1

<Form
  onSubmit={onSubmit}
  render={({ handleSubmit, form, submitting, values }) => (
    <form onSubmit={handleSubmit}>
      {/* 表单内容 */}
      <button type="button" onClick={() => form.reset()}>重置</button>
    </form>
  )}
/>

4.2 组件

组件用于注册和管理单个表单字段。它通过 render props 模式将字段的输入属性和元数据暴露给子组件。

render 函数的参数:

<Field name="email" validate={validateEmail}>
  {({ input, meta }) => (
    <div>
      <input {...input} type="email" />
      {meta.touched && meta.error && <span>{meta.error}</span>}
    </div>
  )}
</Field>

4.3 组件

组件用于订阅表单状态，但不渲染任何 DOM 元素，适合用于监听表单变化。

import { FormSpy } from 'react-final-form';

<FormSpy subscription={
  { values: true }}>
  {({ values }) => (
    <pre>{JSON.stringify(values, 0, 2)}</pre>
  )}
</FormSpy>

4.4 useField Hook
useField 是 React Final Form 提供的 Hook 版本 API，可以在函数组件中直接创建字段。

import { useField } from 'react-final-form';

const MyField = ({ name }) => {
  const { input, meta } = useField(name);
  return (
    <div>
      <input {...input} />
      {meta.touched && meta.error && <span>{meta.error}</span>}
    </div>
  );
};

4.5 useForm Hook
useForm 用于获取当前表单实例，可以在任何子组件中使用。

import { useForm } from 'react-final-form';

const ResetButton = () => {
  const form = useForm();
  return <button onClick={() => form.reset()}>重置表单</button>;
};

4.6 useFormState Hook
useFormState 用于订阅整个表单的状态。

import { useFormState } from 'react-final-form';

const FormStateDisplay = () => {
  const { pristine, valid, submitting } = useFormState();
  return (
    <div>
      是否修改: {String(pristine)}<br />
      是否有效: {String(valid)}<br />
      是否提交中: {String(submitting)}
    </div>
  );
};

来源：
http://xcfsr.cn