在第一次后在 Formik 中设置初始状态 - CSS

Formik 是一种用于构建 React 表单的库。它提供了一种简单的方式来管理表单状态，并帮助开发人员处理表单验证和提交。

在 Formik 中，您可以使用 initialValues 属性来设置表单的初始值。但是，由于 React 组件只有在第一次渲染时才能获得这些初始值，因此对于某些情况（例如，表单从后端加载默认值），您可能需要在第一次渲染之后设置这些初始值。

这可以通过在 useEffect 钩子中设置 initialValues 来完成。例如：

import { useState, useEffect } from "react";
import { Formik, Form, Field } from "formik";

const initialValues = { name: "", email: "" };

const MyForm = () => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [initialValuesFromApi, setInitialValuesFromApi] = useState(null);

  useEffect(() => {
    // simulate an API request
    setTimeout(() => {
      setInitialValuesFromApi({ name: "John", email: "john@example.com" });
      setIsLoaded(true);
    }, 1000);
  }, []);

  if (!isLoaded) {
    return <div>Loading...</div>;
  }

  return (
    <Formik initialValues={initialValues}>
      {(props) => (
        <Form>
          <Field type="text" name="name" defaultValue={initialValuesFromApi.name} />
          <Field type="email" name="email" defaultValue={initialValuesFromApi.email} />
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  );
};

在此示例中，我们使用 useState 和 useEffect 钩子模拟从后端加载初始值。一旦获取这些值，我们设置 setIsLoaded 以确保组件在加载时显示“正在加载”。最后，我们在 Formik 组件中使用 initialValues 属性，并将输入字段的 defaultValue 属性设置为我们从后端加载的初始值。

请注意，由于我们使用 defaultValue 而不是 value 属性，因此用户更改或重置后，输入字段将不会重新渲染默认值。为了处理这种情况，您可能需要手动设置 input 标记的值，或者在用户更改输入字段时更新 initialValues。