僅當特定輸入為空時如何禁用按鈕?

娜蒂害羞

我試圖找到一種方法,僅當特定輸入字段仍為空時才禁用按鈕。我的意思是該過程只需要很少的輸入字段,有些只是可選的。

我參加的課程向我們展示瞭如何禁用按鈕直到每個輸入都有效,所以我不確定該怎麼做。

這是我的代碼,我希望僅當日期為空時才禁用按鈕。

<form className="place-form" onSubmit={placeSubmitHandler}>
    <Input
    id="date"
    element="input"
    type="date"
    label="Date"
    validators={[VALIDATOR_REQUIRE()]}
    errorText=""
    onInput={inputHandler}
  />

  <Input
    id="description"
    element="textarea"
    label="description"
    validators={[VALIDATOR_MINLENGTH(5)]}
    errorText=""
    onInput={inputHandler}
  />
      

  <Button type="submit" disabled={ formState.isValid  }>
     Sumbit
  </Button>
</form>
哈比爾

你需要在Not sign like !之前formState.isValid

<Button type="submit" disabled={ !formState.isValid  }>
     Sumbit
  </Button>

我已經準備了一個使用react-hook-form. 你可以在這裡檢查:

工作演示

編輯 #SO-material-onclick-edit

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

React JS - 如果輸入字段為空,則禁用按鈕?

當輸入字段聚焦時,按鈕被輸入字段隱藏

當輸入字段為空時,我如何仍然可以累加?

僅在用戶輸入憑據時才添加登錄按鈕

UI 元素僅在焦點從原始按鈕/輸入移開時更新

如何僅在請求成功時禁用按鈕 - 否則在反應中保持按鈕啟用

僅當數據存在時如何驗證laravel輸入?

我在這裡有一個滾動條按鈕,我想問一下當我按下特定按鈕時如何獲得特定輸出

當所有輸入字段在 Hyperscript 中都有效時啟用提交按鈕?

當一個按鈕大於另一個時如何將按鈕居中?

僅當不同列的值為 false、null 或與傳入值不匹配且傳入值設置為 true 時,我如何更新列?

如何構建僅在用戶單擊單擊按鈕時才顯示輸出的閃亮應用程序?

當我單擊按鈕時,如何使 <button> 在 console.log 中顯示特定文本?

當輸入大於 9999 時,我需要輸出為“輸入的數字無效”

當按鈕類型為“提交”時,useState 鉤子不會觸發

如何檢查輸入是否為空以應用特定類?

我在 PHP 中有表格形式的數據,我需要的是,當兩列的值相同時,必須禁用該特定的按鈕

從 HTML 輸入到 Javascript 時值為空

僅當高於 minimum_range 時,我如何才能通過讓他輸入數字來限制用戶?

表單內按鈕元素的單擊和輸入事件的奇怪行為

是否可以使用 javascript 為提交輸入按鈕提供 onsubmit 屬性?

未選擇芯片時如何禁用按鈕?

使按鈕在單擊時禁用,但在倒計時不為零之前啟用

當 .grad 為 None 時,如何在 pytorch 中為這個簡單的神經網絡使用反向優化輸入層的權重

當用戶輸入不是 y 或 Y 的輸入時,如何讓 shell 程序退出?

當按下鍵盤上的按鈕時,如何使方塊移動?Tkinter,Python

KeyError:當我在 Pandas 中輸入條件時為 False

僅當數字為十進制 .0 時,我們如何舍入

如果沒有使用 Angular8 在輸入字段中進行編輯,如何禁用保存按鈕