如何在Formik表单中正确管理和更新输入字段的值-js教程-PHP中文网

如何在Formik表单中正确管理和更新输入字段的值

本文探讨在formik表单中使用`usestate`管理输入字段值时遇到的常见问题，特别是外部状态更新与formik内部状态同步的挑战。文章将详细介绍formik的内部工作机制，并提供两种解决方案：利用formik的`setfieldvalue`方法进行状态同步，以及在特定场景下通过`enablereinitialize`属性重新初始化formik，确保表单数据与外部状态保持一致。

在React应用中，当结合Formik这样的表单管理库与React的useState Hook时，开发者有时会遇到一个常见的问题：外部useState更新了，但Formik提交时却未能获取到最新的值，反而回溯到初始值。这通常发生在尝试通过外部状态来控制Formik表单中某个字段的值时。

Formik状态管理基础

Formik是一个流行的React表单库，它简化了表单的构建和验证。Formik通过其内部机制管理表单的所有状态，包括字段值、错误信息、是否已触摸等。

初始化表单状态： Formik通过initialValues属性来初始化其内部的表单状态。一旦Formik组件渲染，它就会根据initialValues创建一份内部状态的快照。
Field组件的作用： Formik的Field组件是连接HTML表单元素与Formik内部状态的关键。当Field组件的name属性与initialValues中的某个键匹配时，Formik会自动将该字段的值与其内部状态绑定，并处理onChange、onBlur等事件。
Field组件的value属性：
- 当Field组件没有显式设置value属性时，它会从Formik的内部状态中读取对应name字段的值。
- 当Field组件显式绑定了value属性（例如value={someStateVariable}）时，它会优先显示这个外部状态的值。然而，Formik的内部状态并不会自动与这个外部value保持同步，除非你通过Formik提供的API手动更新它。

问题分析

考虑以下场景：

import React, { useState } from 'react';
import { Formik, Form, Field } from 'formik';

function MyForm() {
  const [day, setDay] = useState("Gün"); // 外部状态

  const handleFormSubmit = async (values) => {
    console.log(values); // 期望看到更新后的day值
  };

  return (
    <Formik
      onSubmit={handleFormSubmit}
      initialValues={{
        firstname: "",
        lastname: "",
        email: "",
        date: "",
        day: day, // Formik初始化时会获取day的当前值 ("Gün")
      }}
    >
      {({ setFieldValue }) => ( // 通过render prop获取setFieldValue
        <Form>
          {/* 其他字段 */}
          <label>选择日期:</label>
          <Field
            type="radio"
            name="date"
            value="someTimeValue"
            onClick={() => {
              setDay("Pazartesi"); // 仅更新外部day状态
              // 如果需要同步到Formik，这里应该调用setFieldValue
            }}
          />
          <label>星期:</label>
          <Field
            id="day"
            name="day"
            value={day} // 输入框显示外部day状态的值
          />
          <button type="submit">提交</button>
        </Form>
      )}
    </Formik>
  );
}

登录后复制

在这个例子中，当Formik组件首次渲染时，initialValues中的day字段被初始化为useState变量day的当前值，即"Gün"。随后，当用户点击radio button时，onClick事件会调用setDay("Pazartesi")，这会更新外部的day状态，并导致Field id="day"组件重新渲染，显示"Pazartesi"。

然而，Formik的内部状态并没有感知到这个外部day状态的变化。因此，当表单提交时，handleFormSubmit函数接收到的values对象中的day字段仍然是Formik初始化时的值，即"Gün"。

用户手动在day输入框中输入内容时，Formik的Field组件会捕获onChange事件，并使用Formik自身的机制更新其内部状态，这就是为什么手动输入能改变提交值的原因。但通过外部useState进行的更新，Formik并不会自动同步。

解决方案

解决此问题的核心在于确保Formik的内部状态与你期望的表单数据保持一致。以下是两种常用的解决方案：

方案一：使用Formik的setFieldValue方法（推荐）

这是最推荐和最符合Formik设计哲学的方法。Formik提供了一个setFieldValue方法，允许你直接更新其内部特定字段的值。

修改步骤：

获取setFieldValue： 你可以通过useFormikContext Hook（在函数组件中）或Formik的render prop模式来获取setFieldValue函数。
更新onClick处理器： 在radio button的onClick处理器中，不再调用外部setDay，而是使用setFieldValue来更新Formik内部的day字段。
移除外部状态绑定： 让Field组件完全由Formik管理，移除value={day}的绑定，或者将其绑定到formik.values.day以确保显示Formik内部的最新值。

示例代码：

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

import React from 'react';
import { Formik, Form, Field, useFormikContext } from 'formik'; // 引入useFormikContext

// 假设这是一个独立的组件，需要访问Formik上下文
function MyRadioField({ name, value, label, dayValueToSet }) {
  const { setFieldValue } = useFormikContext(); // 获取setFieldValue

  const handleClick = () => {
    setFieldValue('day', dayValueToSet); // 直接更新Formik内部的day字段
    setFieldValue(name, value); // 同时更新radio button自身的字段
  };

  return (
    <label>
      <Field type="radio" name={name} value={value} onClick={handleClick} />
      {label}
    </label>
  );
}

function MyFormWithSetFieldValue() {
  const handleFormSubmit = async (values) => {
    console.log(values); // 现在会输出更新后的day值
  };

  return (
    <Formik
      onSubmit={handleFormSubmit}
      initialValues={{
        firstname: "",
        lastname: "",
        email: "",
        date: "",
        day: "Gün", // 初始值可以直接在这里设置
      }}
    >
      <Form>
        {/* 其他字段 */}
        <label>选择日期:</label>
        <MyRadioField name="date" value="monPm3Time" label="周一 下午3点" dayValueToSet="Pazartesi" />
        <MyRadioField name="date" value="tueAm10Time" label="周二 上午10点" dayValueToSet="Salı" />

        <label htmlFor="day">星期:</label>
        <Field
          id="day"
          name="day"
          // 不再绑定外部day状态，让Formik自行管理
          // 如果需要显式显示，Field组件默认会从Formik.values.day获取
        />
        <button type="submit">提交</button>
      </Form>
    </Formik>
  );
}

export default MyFormWithSetFieldValue;

登录后复制

优点：

直接且高效： 精确控制Formik内部的特定字段，避免不必要的重新渲染。
符合Formik范式： 遵循Formik推荐的表单状态管理方式。
清晰的逻辑： 表单的所有状态都由Formik统一管理，逻辑更清晰。

方案二：利用enableReinitialize属性（特定场景下考虑）

Formik组件提供了一个enableReinitialize属性。当设置为true时，如果initialValues对象发生变化，Formik会重新初始化其内部状态以匹配新的initialValues。

修改步骤：

保持外部useState： 维持day状态和initialValues={{ day: day }}的绑定。
添加enableReinitialize： 在Formik组件上设置enableReinitialize={true}。

示例代码：

import React, { useState } from 'react';
import { Formik, Form, Field } from 'formik';

function MyFormWithEnableReinitialize() {
  const [day, setDay] = useState("Gün"); // 外部状态

  const handleFormSubmit = async (values) => {
    console.log(values); // 现在会输出更新后的day值
  };

  return (
    <Formik
      onSubmit={handleFormSubmit}
      initialValues={{
        firstname: "",
        lastname: "",
        email: "",
        date: "",
        day: day, // Formik的initialValues现在会随着外部day状态的变化而变化
      }}
      enableReinitialize={true} // 启用重新初始化
    >
      <Form>
        {/* 其他字段 */}
        <label>选择日期:</label>
        <Field
          type="radio"
          name="date"
          value="someTimeValue"
          onClick={() => {
            setDay("Pazartesi"); // 更新外部day状态
          }}
        />
        <label htmlFor="day">星期:</label>
        <Field
          id="day"
          name="day"
          value={day} // 输入框显示外部day状态的值
        />
        <button type="submit">提交</button>
      </Form>
    </Formik>
  );
}

export default MyFormWithEnableReinitialize;

登录后复制

优点：

在某些场景下，如果整个表单的初始值需要基于外部数据动态更新，enableReinitialize可能是一个简洁的解决方案。

缺点与注意事项：

性能开销： 频繁地重新初始化Formik会带来额外的性能开销，因为它会重置所有表单字段的状态，包括用户已输入的其他字段。
用户体验： 重新初始化可能会导致用户输入的数据丢失或表单状态意外重置，影响用户体验。
适用场景有限： 仅适用于整个表单需要基于外部变化进行“硬重置”的场景，而不适用于只更新单个字段的情况。对于单个字段的更新，方案一更为合适。

总结与最佳实践

当在Formik表单中管理输入字段的值时，关键在于理解Formik有其自身的内部状态管理机制。

优先使用Formik API： 始终优先使用Formik提供的API（如setFieldValue、setValues等）来修改表单的内部状态。这不仅能确保数据同步，还能利用Formik内置的验证和触摸状态管理。
避免外部状态冲突： 尽量将所有与表单字段直接相关的状态纳入Formik的管辖范围。如果确实需要外部状态影响表单，请确保通过setFieldValue等方法将外部变化同步到Formik内部。
谨慎使用enableReinitialize： enableReinitialize是一个强大的工具，但应谨慎使用。仅当你的业务逻辑确实需要Formik在initialValues变化时进行完整的重新初始化时才考虑使用它，并注意其可能带来的性能和用户体验影响。

通过遵循这些最佳实践，可以有效地在Formik表单中管理和更新输入字段的值，确保表单数据的准确性和一致性。

以上就是如何在Formik表单中正确管理和更新输入字段的值的详细内容，更多请关注php中文网其它相关文章！