如何在React表单提交处理程序中正确地捕获和解析错误

我们广泛使用表单从用户那里获取输入，以便用户能够与Web服务器进行交互。表单包含各种信息，如电子邮件地址、用户名和密码，用户将其发送给我们，我们可以将其存储在Web服务器上。

表单是许多网站中广泛使用的元素，使其成为一个重要的组件。在ReactJS中创建表单类似于在HTML中创建表单，但在HTML中创建的表单是静态的，而在React中，我们可以添加许多独特的功能，如验证等。在构建表单验证时，处理错误变得困难，关键是我们如何给用户一个适当的响应并正确处理错误。

有很多方法可以做到这一点。在这里，我们将使用 Formsy库 来处理表单错误和验证。

什么是Formsy？

Formsy是一个用于React的开源库，用于构建和验证表单输入。我们可以使用该库来捕获和解析错误。它帮助我们处理这两个关键问题：

验证和错误消息
处理表单提交

以下是在项目中使用Formsy的逐步指南：

步骤1： 创建React应用程序

npx create-react-app appname

步骤2： 创建项目文件夹后，进入您的项目文件夹。

cd appname

步骤3： 现在我们可以添加Formsy来构建表单和处理错误。

npm i formsy-react

项目结构: 它将如下所示。

如何在React表单提交处理程序中正确地捕获和解析错误

步骤4： 创建一个名为InputField.js的文件，其中包含一个HTML输入标签。这样我们就可以导入它并在我们的表单中使用它（在App.js中）。

InputField.js： 通过在InputField.js中编写以下代码，先导入formsy-react中的withFormsy。

import { withFormsy } from 'formsy-react'

import { withFormsy } from 'formsy-react'
import React from 'react'
  
class MyInput extends React.Component { 
    constructor(props) { 
        super(props) 
        this.changeValue = this.changeValue.bind(this) 
    } 
  
    changeValue(event) { 
        this.props.setValue(event.currentTarget.value); 
    } 
  
    render() { 
        const errorMessage = this.props.errorMessage;//Line 15 
  
        return ( 
            <div className='input-row'> 
                <label> 
                    {this.props.label}  
                    {this.props.isRequired ? '*' : null} 
                </label> 
                <input onChange={this.changeValue}  
                    type={this.props.type} 
                    placeholder={this.props.placeholder}  
                    value={this.props.value || ''} /> 
                <span>{errorMessage}</span>//Line 21 
            </div> 
        ) 
    } 
} 
  
export default withFormsy(MyInput) //Line 27

在引入 withFormsy 自formsy-react之后，我们创建了一个输入字段并添加了一些常见的HTML属性。第15行指示只有在组件无效时，才会传递错误消息。如果其中一个组件（即输入字段）无效，则在第21行向用户显示错误消息。如果组件（即输入字段）有效，即满足我们的要求，则不会向用户显示错误消息。

注意： 所有Formsy输入组件必须包装在withFormsy高阶组件中，该组件通过props提供属性和方法。第27行指示将一个组件（MyInput）包装在另一个组件（withFormsy）中，包装组件接收容器的所有props，以及一个新的prop（data），它用于渲染其输出。

步骤5： 首先，我们需要从formsy-react中导入Formsy。将以下代码写入您的App.js文件中进行导入。

import Formsy from 'formsy-react'

App.js

import React, { useState } from 'react'
import './App.css'
import Formsy from 'formsy-react'
import InputField from './InputField'//Line 4 
  
// Line 6 
const errors = { 
    isEmail: 'You have to type a valid email', 
    maxLength: 'You cannot type more than 25 characters', 
    minLength: 'You must type more than 6 characters', 
} 
  
function App() { 
    const [canSubmit, setCanSubmit] = useState(false); //Line 14 
  
    const disableButton = () => { 
        setCanSubmit(false); 
    } 
  
    const enableButton = () => { 
        setCanSubmit(true); 
    } 
  
    const submit = () => { 
        console.log('Form is Submitted'); 
    } 
  
    return ( 
        <div className='app'> 
            <h1>Form in React Js</h1> 
  
            <Formsy className='form' 
                onValidSubmit={submit}  
                onValid={enableButton} 
                onInvalid={disableButton}> 
                <InputField label="First Name" 
                    type="text" name="email"
                    validations="maxLength:25" 
                    validationErrors={errors} 
                    placeholder="Type your First Name" 
                    required /> 
  
                <InputField label="Last Name" 
                    type="text" name="lastname"
                    validations="maxLength:25" 
                    validationErrors={errors} 
                    placeholder="Type your last Name" 
                    required /> 
  
                <InputField label="Email address" 
                    type="text" name="email"
                    validations="maxLength:30,isEmail" 
                    validationErrors={errors} 
                    placeholder="Type your email address..." 
                    required /> 
  
                <InputField label="Password" 
                    type="password" name="password"
                    validations="minLength:6" 
                    validationErrors={errors} 
                    placeholder="Type your password..." 
                    required /> 
  
  
                <button type="submit" 
                    disabled={!canSubmit}> 
                    Submit 
                </button> 
            </Formsy> 
        </div> 
    ) 
} 
  
export default App

在App.js中，我们将构建我们的表单逻辑。从第6行开始，我们写了一些错误消息，以便当输入字段的值不符合我们的要求时向用户显示错误。您可以根据您的要求进行更改。然后，我们需要通过导入将inputField组件添加到Line 4中。我们将使用Formsy组件包装所有输入字段，该组件提供了一些有助于表单验证的属性。对我们有帮助的属性，即validations和validationError。

validations: 在这里，我们可以通过逗号分隔传递一些验证器（如maxLength，minLength，isNumeric，isEmail）。并且通过使用“：”可以传递一些参数（例如maxLength:25，因此如果输入字段的值的长度超过25，它将向用户抛出一个错误）。
validationerrors: 您可以手动传递错误给您的表单。当未满足要求时（例如，当输入字段的值的长度超过25个字符时），它会显示出来。

其他属性，如placeholder，type，label等都是常见的HTML属性。

通过这种方式，您可以根据您的要求添加自己的条件和错误消息。

使用Formsy标签包装还为我们提供了OnValidSubmit，OnValid和OnInvalid等功能，这些功能可以帮助我们进行表单提交。

onValidSubmit: 它确保在没有错误的情况下提交表单后要执行的操作。在这种情况下，submit方法将运行并提交我们的表单。
onValid: 它确保仅当所有输入字段都有效时才能提交表单。因此，在这种情况下，如果所有输入字段都有效，则调用enableButton方法，在Line 14中定义的状态变量canSubmit的帮助下启用提交按钮。
onInvalid: 它确保在一个输入字段无效时不能提交表单。因此，在这种情况下，如果一个输入字段无效，则调用disableButton方法，在Line 14中定义的状态变量canSubmit的帮助下禁用提交按钮。

Formsy给我们提供了许多功能，您可以自己探索。

步骤6： 使用以下命令从项目的根目录运行应用程序：