如何从服务器签入 Formik（How to Sign In Formik from Server）

在Web开发中，表单是最常见的交互形式。处理表单的数据可以帮助我们实现许多功能，例如登录、注册、搜索、反馈等。但是，在处理表单时，我们可能会遇到一些问题，例如表单验证、错误处理和状态管理。这就是Formik诞生的原因：一个现代的，灵活的，功能强大的表单库。

但是，Formik的默认设置可能无法满足我们的需求。有时我们需要从服务器请求和处理表单数据。在这篇文章中，我们将讨论如何从服务器签入Formik，以满足我们的需求。

Step 1: 安装 Formik

首先，我们需要安装Formik。我们可以使用npm或yarn进行安装：

npm install formik --save

或者

yarn add formik

这将在我们的项目中安装Formik库，以便我们在代码中使用它。

Step 2: 创建一个表单

接下来，我们需要创建一个表单并将其与Formik库集成。我们可以使用HTML和React等各种技术来创建表单。在本文中，我们将使用React来创建表单。

下面是一个简单的登录表单示例：

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

const SignInForm = () => {
  return (
    <Formik
      initialValues={{ username: '', password: '' }}
      validate={values => {
        const errors = {};
        if (!values.username) {
          errors.username = 'Required';
        }
        if (!values.password) {
          errors.password = 'Required';
        }
        return errors;
      }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <label htmlFor="username">Username</label>
          <Field type="text" name="username" />
          <ErrorMessage name="username" />

          <label htmlFor="password">Password</label>
          <Field type="password" name="password" />
          <ErrorMessage name="password" />

          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default SignInForm;

在这个示例中，我们引入了Formik、Form、Field和ErrorMessage组件。Formik用于包装整个表单，并提供状态管理和事件处理。Form用于创建HTML表单，由Field和ErrorMessage组件提供输入和错误提示。

我们定义了这个表单的初始值为{username: '', password: ''}。我们还为表单输入添加了一些基本验证，并定义了表单提交的行为。在这种情况下，我们只是在控制台中打印了表单的值。

我们可以通过调用<SignInForm />组件来在我们的应用程序中渲染这个表单。

Step 3: 从服务器获取数据

现在我们已经创建了一个表单，接下来我们需要从服务器获取数据并将其填充到表单中。我们可以使用fetch()或axios等库进行网络请求。在本文中，我们将使用axios。

假设我们的服务器返回一个包含登录表单数据的JSON对象。我们可以使用以下代码来获取数据：

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

const SignInForm = () => {
  const [formData, setFormData] = useState(null);

  useEffect(() => {
    axios
      .get('/api/login-data')
      .then(response => {
        setFormData(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  }, []);

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

  return (
    <Formik
      initialValues={{ ...formData }}
      validate={values => {
        const errors = {};
        if (!values.username) {
          errors.username = 'Required';
        }
        if (!values.password) {
          errors.password = 'Required';
        }
        return errors;
      }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <label htmlFor="username">Username</label>
          <Field type="text" name="username" />
          <ErrorMessage name="username" />

          <label htmlFor="password">Password</label>
          <Field type="password" name="password" />
          <ErrorMessage name="password" />

          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default SignInForm;

在这个示例中，我们使用useState来定义一个formData状态，并使用useEffect钩子来获取表单数据。我们通过调用axios.get()来发起GET请求并获取数据。如果请求成功，我们将数据设置为formData状态。如果请求失败，我们将错误信息记录到控制台中。

在渲染表单之前，我们需要检查formData是否已加载。如果还没有加载，我们可以渲染一个“Loading...”文本。否则，我们可以使用initialValues属性将从服务器获取的数据填充到表单中。

Step 4: 发送数据到服务器

最后，我们需要将提交的表单数据发送到服务器。我们可以使用相同的axios库来发送POST请求。在本文中，我们将为表单的“onSubmit”事件添加一个回调函数来处理发送数据的逻辑。

以下是修改后的示例代码：

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

const SignInForm = () => {
  const [formData, setFormData] = useState(null);

  useEffect(() => {
    axios
      .get('/api/login-data')
      .then(response => {
        setFormData(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  }, []);

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

  return (
    <Formik
      initialValues={{ ...formData }}
      validate={values => {
        const errors = {};
        if (!values.username) {
          errors.username = 'Required';
        }
        if (!values.password) {
          errors.password = 'Required';
        }
        return errors;
      }}
      onSubmit={(values, { setSubmitting }) => {
        axios
          .post('/api/login', values)
          .then(response => {
            alert('Logged in successfully!');
            setSubmitting(false);
          })
          .catch(error => {
            console.error(error);
            alert('Failed to log in!');
            setSubmitting(false);
          });
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <label htmlFor="username">Username</label>
          <Field type="text" name="username" />
          <ErrorMessage name="username" />

          <label htmlFor="password">Password</label>
          <Field type="password" name="password" />
          <ErrorMessage name="password" />

          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default SignInForm;

在这个示例中，我们为onSubmit属性添加了一个回调函数，它发送POST请求到/api/login端点，并将表单数据作为请求主体。如果请求成功，我们将弹出“Logged in successfully!”的警报框。如果请求失败，我们将将错误信息记录到控制台，并弹出“Failed to log in!”的警报框。

总结

在本文中，我们讨论了如何从服务器签入Formik表单。我们学习了如何使用axios库从服务器获取表单数据，并将其填充到表单中。我们还学习了如何使用axios发送表单数据到服务器，并在请求成功或失败时处理响应。

我希望这篇文章能够帮助你更好地理解如何在React应用程序中集成Formik，并从服务器签入表单。感谢您的阅读！