表单验证 react_如何使用React处理表单和验证？

最新推荐文章于 2024-04-18 17:25:59 发布

dfsgwe1231

最新推荐文章于 2024-04-18 17:25:59 发布

阅读量3.6k

点赞数

文章标签： python java vue react golang ViewUI

版权

表单验证 react

处理表单是Web应用程序极为常见的用例。在本文中，让我们探索使用React而不使用第三方库来处理表单输入和验证的方法。

我们将介绍适用于大多数用例的最受欢迎的功能：

我们将创建一个Form上下文，该上下文将保存所有状态并为所有Form输入定义所有状态交互。

装入输入时，在这些输入中传递的某些信息将用于提供给Form上下文。

当表单上下文中的输入更改时，它将向表单上下文提交其新值。表单上下文接收值并将其状态更改为新值，并将其向下传递到输入（受控输入）。

提交表单后，它将运行输入装入时注册的所有验证，并为特定字段设置错误。然后，这些将被向下传递到正确的输入并进行相应渲染。

下图总结了每种类型的组件的职责。

该表格状态需要能够容纳3条信息：

我认为该对象应该足够使用。

const FORM_STATE = {
  data : {},
  validators : {},
  errors : {},
};

我们还将约定，每个输入必须具有唯一的名称prop来标识自己。这类似于常规HTML5表单<input>具有name属性的方式。

名称的唯一性很重要，因为我们将在状态结构中将它们用作键。

例如，名称为first_name的输入将存储在FORM_STATE ，如下所示：

{
    data : {
    first_name : "John" ,
  },
  validators : {
    first_name : [fn()],
  },
  errors : {
    first_name : [ "error message" ],
  }
}

要将表单状态和方法注入到每个想要订阅的组件中，我们将使用上下文提供者模式。您可以在此处阅读有关上下文的更多信息。

在我的理解中，上下文是一个包装器，它将道具注入到通过消费者订阅的任何子组件中。有一种使用useContext钩子订阅上下文的便捷方法。

我们还将创建一个HOC，将上下文订阅逻辑封装在一个地方，以便我们的输入尽可能是纯UI。换句话说，输入是表示性组件，只会听取道具更改。表单上下文是包含大多数逻辑的容器。

让我们逐步了解表单上下文的行为。

装入输入时，应在表单上下文中注册自己。在注册时，我们只需从输入中复制验证器，以将其存储在表单上下文中。

卸载输入时，我们应清除其验证，错误以及与该输入关联的所有数据。这是注册功能。

const registerInput = ( { name, validators } ) => {
    setFormState( state => {
      return {
        ...state,
        validator

关注