Final Form实战总结：从入门到进阶的表单处理经验分享

又踩坑了，Final Form的表单验证老是不对劲

最近在用Final Form做项目里的表单验证，发现验证规则怎么都对不上。折腾了半天发现，原来是自己在配置上出了问题。

排查过程，试了几种方案都不行

一开始以为是库的问题，换了几个版本还是不行。后来试了下手动写一些简单的验证规则，发现还是有问题。这里我踩了个坑，把验证规则写得过于复杂，导致解析出错。

接着我又怀疑是不是跟React的状态管理有关，尝试用了几个不同的状态管理库（比如Redux、Context），结果还是不行。折腾了好几天，终于发现问题出在Final Form的配置上。

最终解决方案，核心代码就这几行

经过一番折腾，最后发现只要正确配置validate和onSubmit就能解决问题。下面是完整的代码示例：

import React from 'react';
import { Form, Field } from 'react-final-form';

const validate = (values) => {
  const errors = {};
  if (!values.username) {
    errors.username = '用户名不能为空';
  }
  if (!values.password) {
    errors.password = '密码不能为空';
  }
  return errors;
};

const MyForm = () => (
  <Form
    onSubmit={(values) => {
      console.log('提交的数据：', values);
    }}
    validate={validate}
    render={({ handleSubmit, form, submitting, pristine, values }) => (
      <form onSubmit={handleSubmit}>
        <div>
          <label>用户名</label>
          <Field name="username" component="input" type="text" placeholder="请输入用户名" />
        </div>
        <div>
          <label>密码</label>
          <Field name="password" component="input" type="password" placeholder="请输入密码" />
        </div>
        <div>
          <button type="submit" disabled={submitting || pristine}>
            提交
          </button>
        </div>
      </form>
    )}
  />
);

export default MyForm;

技术细节和原理，这里注意我踩过好几次坑

首先，validate函数必须返回一个错误对象，每个键对应表单字段名，值为错误信息。这个函数会在表单提交时被调用，如果返回的错误对象不为空，表单就不会提交。

其次，onSubmit函数会在表单通过验证后被调用，参数是当前表单的值。这里可以处理表单提交的逻辑，比如发送请求到服务器。

另外，render属性接受一个函数，这个函数会返回一个JSX结构。在这个函数中，你可以访问到handleSubmit、form、submitting、pristine等属性，这些属性可以帮助你控制表单的行为。

改完后还有一两个小问题，但无大碍

虽然解决了主要问题，但是还有一些小问题需要注意。比如输入框的样式和布局，还有错误提示的显示方式。这些问题可以通过自定义组件和CSS来解决，就不在这里详细说了。

以上是我踩坑后的总结，如果你有更好的方案欢迎评论区交流

这次折腾让我对Final Form有了更深的理解，也积累了一些经验。希望这篇文章能帮到同样遇到类似问题的朋友。如果有更好的解决方案或者建议，欢迎在评论区交流。