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

希望這可以幫助！