介绍npm包：react-final-form

React-final-form 是一个高性能的 React 表单库，专门针对 React 而设计，拥有更为灵活的使用方式，让表单开发变得更加简单、容易维护。它利用了 React 的渲染机制，实现了自动重渲染，减少了无用的渲染，对于表单数据的验证、提交等也提供了完备的支持。

安装react-final-form

npm install react-final-form

react-final-form的主要特点

• 开发者友好：简单易用的 API，简化表单的开发工作。
• 性能出色：通过利用 React 的渲染机制，实现了自动重渲染，使表单的交互更加流畅。
• 对表单值的处理更加灵活：通过提供透明的值变换和透明的表单状态管理，方便地处理表单的值。
• 表单验证更简单：通过使用校验器、异步校验器和提交验证器，轻松实现表单验证。
• 支持多种表单架构：支持普通表单、分组表单、数组表单等多种表单架构。

简单示例

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

const onSubmit = values => {
   window.alert(JSON.stringify(values, 0, 2))
}

const SimpleForm = () => (
  <Form
    onSubmit={onSubmit}
    render={({ handleSubmit, form, submitting, pristine, values }) => (
      <form onSubmit={handleSubmit}>
        <div>
          <label>First Name</label>
          <Field name="firstName" component="input" type="text" placeholder="First Name" />
        </div>
        <div>
          <label>Last Name</label>
          <Field name="lastName" component="input" type="text" placeholder="Last Name" />
        </div>
        <div className="buttons">
          <button type="submit" disabled={submitting}>Submit</button>
          <button type="button" onClick={form.reset} disabled={submitting || pristine}>Reset</button>
        </div>
        <pre>{JSON.stringify(values, 0, 2)}</pre>
      </form>
    )}
  />
)

export default SimpleForm

结语

总之，react-final-form 使表单开发变得更加容易和快速,如果您的项目中需要使用表单，react-final-form 绝对是您的不二选择，快来试试吧！