在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将阻止提交。

希望这会有所帮助！