使用带有React本机的formik

It is nearly impossible to evade creating forms for a web or mobile application developer. Formik is a godsend for the ReactJS developers. It is a project developed to make handling forms easier for web applications. However, the mobile applications written in React native seem to under-utilise this library. This brief post demonstrates using the same for React native application along with adding validations using Yup.

逃避为Web或移动应用程序开发人员创建表单几乎是不可能的。 Formik是ReactJS开发人员的天赐之物。 它是一个旨在使Web应用程序处理表单更容易的项目。 但是，用React本机编写的移动应用程序似乎未充分利用该库。 这篇简短的文章演示了如何将其用于React本机应用程序以及使用Yup添加验证。

Start by adding Formik and Yup to the project using yarn or npm.

首先使用yarn或npm将Formik和Yup添加到项目中。

yarn add formik yup

yarn add formik yup

Next, we will use above-added projects to create a form. Start with importing Formik and Yup as shown below

接下来，我们将使用上面添加的项目来创建表单。 开始导入Formik和Yup，如下所示

import * as yup from "yup";import { Formik } from "formik";

Let us start by writing our validations. These Yup validations will be later plugged into the form.

让我们从编写验证开始。 这些Yup验证将稍后插入表单中。

let validationSchema = yup.object().shape({
  issueDescription: yup.string().min(20).required(),
  email: yup.string().email().required(),
});

The validation schema outlines the type of values and their respective constraints that the form can accept. The variable validationSchema above creates validation guidelines for issueDescription and email field. The issue description has to be at least 20 characters long and cannot be left empty. Similarly, the email value has to be a string and a valid email. This field can also be not left empty.

验证模式概述了表单可以接受的值的类型及其各自的约束。 可变validationSchema上面创建issueDescription和电子邮件字段验证的准则。 问题说明必须至少包含20个字符，并且不能为空。 同样，电子邮件值必须是字符串和有效的电子邮件。 此字段也不能留空。

The form elements like the input fields and checkboxes are wrapped between the Formik tags.

诸如输入字段和复选框之类的表单元素被包装在Formik标记之间。

<Formik
initialValues={{ issueDescription: '', email: ''}}
onSubmit={values => handleForm(values)}
validationSchema={validationSchema}>{({ values, handleChange, errors, handleSubmit }) => (....)}
</Formik>

In the snippet above, the bold-italic text represents the attributes that Formik is used with. The initialValues contain an object with fields and their initial values. These values are injected into the form fields when they first appear. The keys of this object should match with the name of the form elements. For example, there should be an input field with the name issueDescription in the form we will create.

在上面的代码段中，粗体斜体文本表示与Formik一起使用的属性。 initialValues包含一个具有字段及其初始值的对象。 这些值首次出现时将注入到表单字段中。 该对象的键应与表单元素的名称匹配。 例如，在我们将创建的表单中，应该有一个名为issueDescription的输入字段。

The onSubmit takes a handler that outlines what should be done when a form is submitted. The validationSchema describes the rules that should that determine if the values in the form elements are valid or invalid. This is where Yup comes into the picture.

onSubmit采用一个处理程序，该处理程序概述了提交表单时应执行的操作。 validationSchema描述了确定表单元素中的值是有效还是无效的规则。 这是Yup出现的地方。

{({ values, handleChange, errors, handleSubmit })

The line above shows the set of values that are available to the form components. These are utilized to present validation errors, to register any change in the input field, identify when the field was in focus, etc. These values, that are given as arguments to the form, act as missing pieces as shown below.

上面的行显示了表单组件可用的一组值。 这些值用于显示验证错误，注册输入字段中的任何更改，识别字段何时成为焦点等。这些值(作为表单的参数提供)充当缺少的部分，如下所示。

<TextInput
name="issueDescription"
placeholder="Describe the issue"
style={styles.inputs}
value={values.issueDescription}
onChangeText={handleChange('issueDescription')}
/>{(errors.issueDescription) && <Text>Invalid issue description</Text>}

The bold parts in the above snippet are values passed as arguments to the form. Its last part conditionally renders an error if the description is invalid.

上面代码段中的粗体部分是作为参数传递给表单的值。 如果描述无效，其最后一部分将有条件地呈现错误。

Finally, a button can be used to submit the form. The button would roughly look like below

最后，可以使用一个按钮来提交表单。 该按钮大致如下所示

<Button 
title="Report an issue"
onPress={handleSubmit}
/>

For the sake of simplicity, the part where the button can be disabled based on the form state is omitted. This can be easily done using the guide here.

为了简单起见，省略了可以基于表单状态禁用按钮的部分。 使用此处的指南可以轻松完成此操作。

Hope this makes building forms a bit easier for you.

希望这会使您轻松构建表格。

翻译自: https://medium.com/javascript-in-plain-english/using-formik-with-react-native-c2b5820cc718