我有一个简单的表单来获取表格的行/列号,其中包含一个重新加载页面onClick的按钮type = "submit"
。
我希望在用户输入无效值时保留警告,因为输入具有所需的最大/最小值,这对于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>
发布于 2019-02-12 02:28:14
如果我很好地理解您的问题,您希望保留默认的html警告。我有以下几点建议:
button
附加onClick
事件处理程序,因为默认情况下,HTML form
中或类型为submit
的button
会提交给它所包含的表单。如果您可以将behaviour.因此您的代码可能如下所示:
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>
https://stackoverflow.com/questions/54636500
复制相似问题