react-final-form - 更新 react-final-form 中的表单状态

Question

我想根据我的自定义条件将表单状态设置为无效。我需要基于它禁用提交按钮。

我扫描了 react-final-form 文档，但找不到相同的方法。有什么办法吗

Answer 1

我会查看任何“同步验证”示例。

您可以通过执行以下操作禁用（灰显）提交按钮：

<Form onSubmit={onSubmit}>
  {({ handleSubmit, invalid }) => (
    <form onSubmit={handleSubmit}>
      ...fields here...
      <button type="submit" disabled={invalid}>Submit</button>
    </form>
  )}
</Form>

但我建议不要这样做，因为尝试提交无效表单会将所有字段标记为touched，这是仅在用户尝试提交表单时才显示错误的好方法。

如果表单有验证错误，提交将被 React Final Form 阻止。

希望这可以帮助！