使用React-Form库管理React表单状态

One of Shopify’s philosophies when it comes to adopting a new technology isn’t only to level up the proficiency of our developers so they can implement the technology at scale, but also with the intent of sharing their new found knowledge and understanding of the tech with the developer community.

当涉及到采用一项新技术时，Shopify的理念之一不仅是为了提高我们的开发人员的熟练程度，以便他们能够大规模地实施该技术，而且也是为了与开发人员社区分享他们新发现的知识和对该技术的理解。

In Part 1 (Building a Form with Polaris) of this series, we were introduced to Shopify’s Polaris Design System, an open source library used to develop the UI within our Admin and here in Part 2 we’ll delve further into Shopify’s open source Quilt repo that contains 72 npm packages, one of which is the react-form library. Each package was created to facilitate the adoption and standardization of React and each has its own README and thorough documentation to help get you started.

在本系列的第一部分（用Polaris构建表单）中，我们介绍了Shopify的Polaris设计系统，这是一个用于开发Admin中UI的开源库，在第二部分中，我们将进一步深入了解Shopify的开源Quilt repo，其中包含72个npm包，其中一个是react-form库。每个包都是为了促进React的采用和标准化而创建的，每个包都有自己的README和详尽的文档来帮助你开始使用。

The react-form Library

反应式图书馆

If we take a look at the react-form library repo we can see that it’s used to:

如果我们看一下react-form库的repo，我们可以看到它是用来。

Manage React forms tersely and safely-typed with no effort using React hooks. Build up your form logic by combining hooks yourself, or take advantage of the smart defaults provided by the powerful useForm hook.

使用React钩子，不费吹灰之力就能管理React表单的简明和安全类型。通过自己组合钩子来建立你的表单逻辑，或者利用强大的useForm钩子所提供的智能默认值。

The useForm and useField Hooks

useForm和useField钩子

The documentation categorizes the API into three main sections: Hooks, Validation, and Utilities. There are eight hooks in total and for this tutorial we’ll focus our attention on just the ones most frequently used: useForm and useField.

文档将API分为三个主要部分。钩子、验证和实用工具。总共有八个钩子，在本教程中，我们只关注最经常使用的钩子：useForm和useField。

useForm is a custom hook for managing the state of an entire form and makes use of many of the other hooks in the API. Once instantiated, it returns an object with all of the fields ...