如何停止 Enter 鍵按下表單提交

Question

我想按回車鍵不提交表格，只需點擊提交按鈕，表格將在ReactJS提交

const handleSubmit = (data) ={ 
}

<form onSubmit={handleSubmit}>
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="Submit" />
</form>

Answer 1

您可以做的是將onKeyPress處理程序應用於您的form ，如果按下的鍵的值為Enter ，則阻止默認行為（提交）。

<form
  onSubmit={handleSubmit}
  onKeyPress={(e) => {
    e.key === "Enter" && e.preventDefault();
  }}
>
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <button type="submit">Submit</button>
</form>

請注意，您可能還希望在提交表單時阻止默認行為，否則您可能會刷新頁面。

const handleSubmit = (event) => {
  event.preventDefault();
}

要獲取您輸入的name的值，您可以執行以下操作：

const handleSubmit = (event) => {
  event.preventDefault();

  console.log(event.target.name.value);
}

同樣的原則適用於您在form中可能擁有的任何其他字段。

Answer 2

您可以像這樣更改 handleSubmit function：

const handleSubmit = (e) => {
    e.preventDefault()
 }

e.preventDefault()這會阻止表單的默認行為以及與之相關的所有事件。

Answer 3

您可以在不使用表單標簽的情況下執行此操作，並將輸入值存儲在 state

const handleSubmit = () ={


}


<div>
  <div>
    Name:
  <input type="text" name="name" />
  </div>
  <input onClick={handleSubmit} value="Submit" />
</div>

Answer 4

試試這個。

const handleSubmit = (data) ={ 
}

<form onSubmit={() => handleSubmit()}>
 <label>
   Name:
   <input type="text" name="name" />
 </label>
 <input type="submit" value="Submit" />
</form>