使用formik处理反应中的形式

Web表单对于网站和应用程序至关重要。尽管本机HTML表格提供了基本功能，但管理其状态，验证和提交可能会变得复杂。反应以其组件驱动的方法，简化了形式的处理，但仍可以导致详细的代码。 formik是一个轻巧的库，优雅地解决了这些挑战，简化了状态管理，验证和提交。

本文展示了用Formik构建React表格，展示了其处理状态，验证和提交的能力。我们将从基本的React组件开始，然后集成Formik。

建立受控的反应形式

反应组件依赖于状态和道具。 HTML表单元素通过其value属性维护内部状态。这使它们无法控制的组件 - DOM管理国家。但是，受控组件（反应管理国家）提供了更好的控制权和单一的真理来源。

简单的不受控制的HTML表格可能看起来像这样：

<div class="formRow">
  <label for="email">电子邮件</label>
  <input type="email" id="email">
</div>
<div class="formRow">
  <label for="password">密码</label>
  <input type="password" id="password">
</div>
<button type="submit">提交</button>

将其转换为受控的反应组件：

函数htmlform（）{
  const [email，setemail] = react.usestate（“”）;
  const [password，setpassword] = react.usestate（“”）;

  返回 （
    

电子邮件 setemail（e.target.value）} />

密码 setPassword（e.target.value）} />

提交

）； }

这种方法为形式值提供了一个真实的来源，从而更轻松地验证和性能优化。

为什么选择Formik？

存在许多形式的管理库（例如，React Hook形式，Redux表单）。 Formik通过：

1. 声明方法：抽象简化了状态，验证和提交。
2. Escape Hatch：在需要时提供控制，尽管其抽象。
3. 共同标准的状态：将与形式相关的逻辑保持在组件中。
4. 适应性：允许根据需要使用尽可能多或少的formik。
5. 易用性：简单有效。

让我们将Formik集成到我们的形式组件中。

实施Formik

我们将创建一个基本的登录表单，探索三种formik使用方法：

1. useFormik钩
2. 与React上下文的Formik（<formik></formik> ）
3. withFormik高阶组件

演示需要Formik和YUP软件包。

方法1： useFormik钩

我们当前的形式是非功能的。 useFormik钩提供Formik函数和变量。记录返回的值显示其内容。

我们将使用useFormik与initialValues和一个onSubmit处理程序：

 //反应组件
函数baseformik（）{
  const formik = useformik（{{
    初始值：{电子邮件：“”，密码：“”}，
    onsubmit（values）{
      //表格提交逻辑
    }
  }）;

  返回 （
    

{/ *形式元素 */}

）； }

绑定形式以形成元素：

 //反应组件
函数baseformik（）{
  const formik = useformik（{{
    初始值：{电子邮件：“”，密码：“”}，
    onsubmit（values）{
      //表格提交逻辑
    }
  }）;

  返回 （
    

电子邮件

{/ * ...其他表单元素 */}

）； }

这将处理提交（ onSubmit={formik.handleSubmit} ）和输入状态（ value ，通过formik.getFieldProps onChange ）。我们避免手动状态管理和活动处理。破坏getFieldProps和handleSubmit进一步提高了代码清晰度。

这<formik></formik>组件提供了与内置组件这样的进一步抽象<field></field>，，，，<form></form> ， 和<errormessage></errormessage>。这些组件利用渲染道具模式。

从'formik'导入{formik，field，form};

函数formikrenderprops（）{
  const initialValues = {email：“”，密码：“”};

  const onSubmit =（values）=> {
    警报（json.stringify（values，null，2））;
  };

  返回 （
    <formik initialvalues="{initialValues}" onsubmit="{onSubmit}">
      {（）=>（
        <form>
          <field classname="email formField" name="email" type="email"></field>
          {/ * ...其他表单元素 */}
        </form>
      ）
    </formik>
  ）；
}

Formik处理状态和提交；我们专注于形式结构。

与Formik的形式验证

Formik在表单级别（使用validate或validationSchema ），现场级别或手动触发器提供验证。表单级验证立即验证整个表单。 validate用于自定义验证，而validationSchema则使用YUP之类的库。

使用validate的示例：

 const formik = useformik（{{
  // ...
  validate ：（）=> {
    const errors = {};
    if（！formik.values.email）{errors.email =“必需”; }
    // ...其他验证
    返回错误；
  }，，
  // ...
}）;

示例与yup一起validationSchema ：

 const formik = useformik（{{
  // ...
  验证chema：yup.object（）。shape（{{
    电子邮件：yup.string（）。电子邮件（“无效电子邮件”）。必要（“必需”），
    // ...其他验证
  }），
  // ...
}）;

现场级别和手动验证也是可能的。

方法3： withFormik高阶组件

withFormik是包装您的表单组件的高阶组件。

实际例子

让我们说明显示错误消息并生成用户名。

显示错误消息

Formik简化了错误显示。检查errors对象并显示消息：

<label htmlfor="email">
  电子邮件
  {formik.touched.email && formik.errors.email}
</label>

或使用<errormessage></errormessage>：

<errormessage name="email"></errormessage>

生成用户名

Formik的setValues可用于从电子邮件中生成用户名：

 onsubmit（values）{
  formik.setValues（{... values，用户名：`@$ {values.email.split（“@”）[0]}`}）;
}

结论

Formik大大简化了反应形式处理。本文涵盖了基础知识；探索Formik的文档，以了解高级功能和用例。

以上是使用formik处理反应中的形式的详细内容。更多信息请关注PHP中文网其他相关文章！