react-final- form :使用表单更改返回的数据更新验证规则和重新验证字段

const validate = values => {
  const errors = {};
  if (!values.firstName) {
    errors.firstName = 'Required';
  }
  // 其他验证规则...
  return errors;
};

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

const MyForm = () => (
  <Form
    onSubmit={onSubmit}
    validate={validate}
    render={({ handleSubmit, form, submitting, pristine, invalid }) => (
      <form onSubmit={handleSubmit}>
        <Field name="firstName">
          {({ input, meta }) => (
            <div>
              <label>First Name</label>
              <input {...input} type="text" placeholder="First Name" />
              {meta.touched && meta.error && <span>{meta.error}</span>}
            </div>
          )}
        </Field>
        {/* 其他字段... */}
        <button type="submit" disabled={submitting || pristine || invalid}>Submit</button>
      </form>
    )}
  />
);

const onValuesChange = (changedValues, allValues) => {
  // 根据 changedValues 或 allValues 更新验证规则
  if (allValues.someField === 'someValue') {
    // 更新验证规则
  }
};

const onSubmit = async values => {
  // 提交表单数据
  try {
    await submitForm(values);
  } catch (error) {
    // 处理提交错误
  }
};

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

const validate = values => {
  const errors = {};
  if (!values.firstName) {
    errors.firstName = 'Required';
  }
  // 其他验证规则...
  return errors;
};

const onValuesChange = (changedValues, allValues) => {
  // 根据 changedValues 或 allValues 更新验证规则
  if (allValues.someField === 'someValue') {
    // 更新验证规则
  }
};

const onSubmit = async values => {
  // 提交表单数据
  try {
    await submitForm(values);
  } catch (error) {
    // 处理提交错误
  }
};

const MyForm = () => (
  <Form
    onSubmit={onSubmit}
    validate={validate}
    onValuesChange={onValuesChange}
    render={({ handleSubmit, form, submitting, pristine, invalid }) => (
      <form onSubmit={handleSubmit}>
        <Field name="firstName">
          {({ input, meta }) => (
            <div>
              <label>First Name</label>
              <input {...input} type="text" placeholder="First.js" />
              {meta.touched && meta.error && <span>{meta.error}</span>}
            </div>
          )}
        </Field>
        {/* 其他字段... */}
        <button type="submit" disabled={submitting || pristine || invalid}>Submit</button>
      </form>
    )}
  />
);

export default MyForm;