如何防止提交按钮重新加载页面，同时保持默认表单警告？

Question

我有一个简单的表单来获取 table 的 row/column 号码，使用按钮 type = "submit" 重新加载页面 onClick 。

我想在用户输入无效值时保留警告，因为输入需要 maximum/minimum 数字，这在 onClick 方法末尾的 return false; 是不可能的, 或 event.preventDefault();

知道怎么做吗？

此代码在 JSX 中：

<form id="table_form">
   <label>how many rows ?</label>
   <input
     type="number"
     name="rows"
     min={min_tablerows}
     max={max_tablerows}
     required
     value={tablerows}
     onChange={onChangeHandeler} />
   <label>how many columns ?</label>
   <input
     type="number"
     name="columns"
     min={min_tablecolumns}
     required
     value={tablecolumns}
     onChange={onChangeHandeler} />
   <button
     type="submit"
     form="table_form"
     onClick={onClickHandeler}>
       <FontAwesomeIcon icon={faCheck} />
   </button>
</form>

Answer 1

如果我理解你的问题，你想保留默认的 html 警告。我想提出以下建议：

首先，您不需要为 button 附加 onClick 事件处理程序，因为 HTML [=14] 中的 button =] 或类型 submit 默认情况下提交到它包含的表单。
您可以将 onSubmit 事件处理程序附加到主窗体，并在其回调函数中防止默认行为。
有了这个，html5 将处理任何错误并阻止表单在第一时间提交。当它没有发现任何错误时，它将运行回调函数附加到表单的事件处理程序。

所以你的代码可能如下：

handleSubmit(e) {
e.preventDefault();
// Do what you like here

e.target.submit(); // if you want to submit the forms
}

<form id="table_form" onSubmit={this.handleSumbit.bind(this)}>
   <label>how many rows ?</label>
   <input
     type="number"
     name="rows"
     min={min_tablerows}
     max={max_tablerows}
     required
     value={tablerows}
     onChange={onChangeHandeler} />
   <label>how many columns ?</label>
   <input
     type="number"
     name="columns"
     min={min_tablecolumns}
     required
     value={tablecolumns}
     onChange={onChangeHandeler} />
   <button
     type="submit">
       <FontAwesomeIcon icon={faCheck} />
   </button>
</form>

如何防止提交按钮重新加载页面，同时保持默认表单警告？

How to prevent the submit button from reloading the page, while keeping default form warnings?

html

forms

button

page-refresh

reactjs