使用 Formik 验证 React-Bootstrap 表单

2019-11-27 08:00:00 · 飞浪

使用Formik验证React-Bootstrap表单在React中创建表单可能比听起来更复杂。您需要管理表单的状态并验证每个字段。您可能还需要在提交之前验证整个表单。您可能需要跟踪触

使用 Formik 验证 React-Bootstrap 表单

在 React 中创建表单可能比听起来更复杂。您需要管理表单的状态并验证每个字段。您可能还需要在提交之前验证整个表单。您可能需要跟踪触摸的输入，或者表单中是否有任何内容发生了变化。幸运的是，在当今的开源项目时代，并且感谢 React 库的所有贡献者，创建表单不再那么困难。我将向您展示如何使用 [Formik] (https://jaredpalmer.com/formik/) 库在 React 中创建表单。

Formik 简介

Formik 是一个表单库，由 Jared Palmer 创建，其目的是让 React 中的表单使用不再那么手动。

我对 Formik 的目标是创建一个可扩展、高性能的表单助手，它具有最少的 API，可以完成那些非常烦人的工作，而剩下的就交给你了。– Jared Palmer

使用 Formik，您可以设置初始表单状态，在表单级别进行验证，在字段级别进行验证，并呈现您需要的任何表单元素。

在本指南中，我们将使用react-bootstrap组件库。React-Bootstrap 有一组使用经典 bootstrap v4 样式的输入组件。由于 bootstrap 附带数百个类和可自定义的组件，因此使用 bootstrap 可以为您节省大量编写表单样式的时间。

设置 Formik 表格

要开始使用 Formik，我们需要将其添加到我们的项目中：

      yarn add formik
#or 
npm i --save formik
    

让我们开始创建一个新表单：

      import React from 'react';
import {Formik} from 'formik';

const BookForm = () => {
    return (
        <Formik 
            initialValues={{
                firstName: '',
                lastName: '',
            }}
            onSubmit={() => console.log('form submitted!!')}
            render={(formProps) => (...)}
        />
    )
}
    

此示例显示了具有三个必需属性的基本表单：

初始值
onSubmit 方法
render 方法

初始值

initialValues属性表示表单中所有可用字段的起始值。例如，如果您想让用户有机会继续他们之前开始的表单，您可以使用已保存的数据填充initialValues 。

      <Formik 
    initialValues={{
        firstName: 'Marques',
        lastName: 'Woodson',
    }}
    ...
/>
    

onSubmit 方法

顾名思义，onSubmit是您希望在提交表单时调用的函数。提供的参数是(vales, formikBag)。Values是一个包含表单所有字段值的对象。formikBag是一个包含表单所有注入的 props 和方法（如isValid、setFieldValue和许多其他表单方法）的对象。

      <Formik 
    initialValues={{
        firstName: 'Marques',
        lastName: 'Woodson',
    }}
    onSubmit={(values) => {
        if (values.firstName && values.lastName) {
            console.log('form submission complete!!');
        }
    }}
/>
    

render 方法

render方法是渲染实际表单的地方。render 函数提供了一个表单props参数，其中包含values、errors、handleChange方法、handleSubmit方法和handleBlur方法。

      <Formik 
    initialValues={{
        firstName: 'Marques',
        lastName: 'Woodson',
    }}
    onSubmit={(values) => {
        if (values.firstName && values.lastName) {
            console.log('form submission complete!!');
        }
    }}
    render={({handleChange, handleSubmit, handleBlur, values, errors}) => (
        <form>
            <input onChange={handleChange} onBlur={handleBlur} value={values.firstName} ... />
            <button onClick={handleSubmit}>Submit</button>
        </form>
    )}
/>
    

在字段中渲染 React-Bootstrap 输入

现在您已经了解了Formik 中的render函数是如何工作的，您可能能够猜出我们如何在表单中使用react-bootstrap字段。Formik 提供了一个Field组件，用于渲染和将输入连接到 Formik 表单。我们将使用此组件来渲染我们的 react-bootstrap 输入。

场地

每个Field组件都需要一个 name 属性，该属性应与表单值中的键匹配。这就是表单使其状态与字段值保持同步的方式。Formik 允许您渲染要在 Field 中使用的自定义组件。这可以通过Field上的两个可用属性之一完成：component或render。我们还将使用render属性来渲染 react-bootstrap 输入。render 函数的参数是field对象和formProps对象。field对象包含onChange方法、onBlur方法、name和字段的值。formProps 对象具有表单的状态及其所有辅助方法。

      import FormControl from 'react-bootstrap/FormControl';
import FormGroup from 'react-bootstrap/FormGroup';
import FormLabel from 'react-bootstrap/FormLabel'; 
<Formik 
    ...
    render={({handleChange, handleSubmit, handleBlur, values, errors}) => (
        <Form>
            <Field 
                name="firstName"
                render={({field, formProps}) => (
                    <FormGroup controlId="firstName">
                        <FormLabel>First Name</FormLabel>
                        <FormControl type={'text'} value={field.value} onChange={field.onChange} />
                    </FormGroup>
                )}
            />
        </Form>
    )}
/>
    

在 react-bootstrap 中，FormControl本质上是一个带样式的输入字段。然后我们将标签和FormControl包装在FormGroup组件中，这将添加一些间距和样式，并使用controlId属性将标签与输入连接起来。

使用 Formik (onBlur 或 onChange) 执行输入验证

为了验证表单，我们将使用Formik 的 validate属性。此属性接受一个带有参数values的函数，该参数是包含表单值的对象。validate 函数应返回一个错误对象。

      <Formik 
    ...
    validate={(values) => {
        let errors = {};
        if (!values.firstName) {
            errors.firstName = 'First name is required';
        }

        if (!values.lastName) {
            errors.lastName = 'Last name is required';
        }

        return errors;
    }}
    render={({handleChange, handleSubmit, handleBlur, values, errors}) => (
        ...
    )}
/>
    

以编程方式调用validate()函数

您可以使用 formProps 对象上的可用方法之一以编程方式验证表单：validateForm。您可以随时调用此函数，而无需实际提交表单。

      <Formik 
    ...
    validate={(values) => {
        let errors = {};
        if (!values.firstName) {
            errors.firstName = 'First name is required';
        }

        if (!values.lastName) {
            errors.lastName = 'Last name is required';
        }

        return errors;
    }}
    render={({handleChange, handleSubmit, handleBlur, values, errors, validateForm}) => (
        <Form>
            <Field 
                name="firstName"
                render={({field, formProps}) => (
                    <FormGroup controlId="firstName">
                        <FormLabel>First Name</FormLabel>
                        <FormControl type={'text'} value={field.value} onChange={field.onChange} />
                    </FormGroup>
                )}
            />
            <button onClick={validateForm}>Validate Form</button>
        </Form>
    )}
/>
    

结论

本指南简要介绍了 Formik 库。现在，您知道如何使用 React-Bootstrap 组件库通过 Formik 创建表单。您还知道如何使用 Formik 对表单运行表单验证。Formik 中还有许多其他功能，我强烈建议您在 [文档] (https://jaredpalmer.com/formik/docs/overview) 中查看它们，尤其是 [Yup-schema form-validation] (https://jaredpalmer.com/formik/docs/guides/validation#flavors-of-validation)。

感谢阅读。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

使用 Formik 验证 React-Bootstrap 表单

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React from 'react'; import {Formik} from 'formik'; const BookForm = () => { return ( <Formik initialValues={{ firstName: '', lastName: '', }} onSubmit={() => console.log('form submitted!!')} render={(formProps) => (...)} /> ) }

<Formik initialValues={{ firstName: 'Marques', lastName: 'Woodson', }} onSubmit={(values) => { if (values.firstName && values.lastName) { console.log('form submission complete!!'); } }} />

<Formik initialValues={{ firstName: 'Marques', lastName: 'Woodson', }} onSubmit={(values) => { if (values.firstName && values.lastName) { console.log('form submission complete!!'); } }} render={({handleChange, handleSubmit, handleBlur, values, errors}) => ( <form> <input onChange={handleChange} onBlur={handleBlur} value={values.firstName} ... /> <button onClick={handleSubmit}>Submit</button> </form> )} />

import FormControl from 'react-bootstrap/FormControl'; import FormGroup from 'react-bootstrap/FormGroup'; import FormLabel from 'react-bootstrap/FormLabel'; <Formik ... render={({handleChange, handleSubmit, handleBlur, values, errors}) => ( <Form> <Field name="firstName" render={({field, formProps}) => ( <FormGroup controlId="firstName"> <FormLabel>First Name</FormLabel> <FormControl type={'text'} value={field.value} onChange={field.onChange} /> </FormGroup> )} /> </Form> )} />

<Formik ... validate={(values) => { let errors = {}; if (!values.firstName) { errors.firstName = 'First name is required'; } if (!values.lastName) { errors.lastName = 'Last name is required'; } return errors; }} render={({handleChange, handleSubmit, handleBlur, values, errors}) => ( ... )} />

<Formik ... validate={(values) => { let errors = {}; if (!values.firstName) { errors.firstName = 'First name is required'; } if (!values.lastName) { errors.lastName = 'Last name is required'; } return errors; }} render={({handleChange, handleSubmit, handleBlur, values, errors, validateForm}) => ( <Form> <Field name="firstName" render={({field, formProps}) => ( <FormGroup controlId="firstName"> <FormLabel>First Name</FormLabel> <FormControl type={'text'} value={field.value} onChange={field.onChange} /> </FormGroup> )} /> <button onClick={validateForm}>Validate Form</button> </Form> )} />