Javascript 在输入中按enter键时,反应阻止表单提交
按enter键时,反应阻止表单提交 我有下面的React搜索栏组件,父容器可以在其中使用Javascript 在输入中按enter键时,反应阻止表单提交,javascript,reactjs,Javascript,Reactjs,按enter键时,反应阻止表单提交 我有下面的React搜索栏组件,父容器可以在其中使用 <SearchBar onInputChange={this.handleInputChange} /> 每次用户更改输入时,都会通知父容器。这就是为什么我的搜索栏不需要任何提交按钮 然而,我发现如果我在搜索栏中按enter键,整个页面就会刷新。我不想那样 我知道如果表单中有一个按钮,我可以调用event.preventDefault()。但在这种情况下,我没有按钮,所以我不知道该怎么做这
<SearchBar onInputChange={this.handleInputChange} />
每次用户更改输入时,都会通知父容器。这就是为什么我的搜索栏不需要任何提交按钮
然而,我发现如果我在搜索栏中按enter键,整个页面就会刷新。我不想那样
我知道如果表单中有一个按钮,我可以调用event.preventDefault()。但在这种情况下,我没有按钮,所以我不知道该怎么做这里
class SearchBar extends Component {
constructor(props) {
super(props);
this.state = { value: '' };
this.handleChange = this.handleChange.bind(this)
}
handleChange(e) {
this.setState({ value: e.target.value });
this.props.onInputChange(e.target.value);
}
render() {
return (
<div id="search-bar">
<form>
<FormGroup controlId="formBasicText">
<FormControl
type="text"
onChange={this.handleChange}
value={this.state.value}
placeholder="Enter Character Name"
/>
</FormGroup>
</form>
</div>
);
}
}
export default SearchBar
类搜索栏扩展组件{
建造师(道具){
超级(道具);
this.state={value:''};
this.handleChange=this.handleChange.bind(this)
}
手变(e){
this.setState({value:e.target.value});
这个.props.onInputChange(即target.value);
}
render(){
返回(
);
}
}
导出默认搜索栏
您需要创建一个表单处理程序来阻止默认表单操作
最简单的实施方式是:
<form onSubmit={e => { e.preventDefault(); }}>
我不确定这是否适用于每种情况,因为当您在表单的输入字段中按enter键时,仍然会触发onSubmit方法,尽管默认提交不会发生。这意味着您仍将触发为表单设计的伪提交操作。一个带有ES6的单衬套,专门且完整地解决了该问题:
<input onKeyPress={(e)=>{e.target.keyCode === 13 && e.preventDefault();}} />
{e.target.keyCode==13&&e.preventDefault();}}/>
此解决方案应该没有副作用,并直接解决问题。在带有搜索输入字段的React组件中,嵌套在更大的(非React或React)表单中,这对我跨浏览器的工作效果最好:
<MyInputWidget
label="Find"
placeholder="Search..."
onChange={this.search}
onKeyPress={(e) => { e.key === 'Enter' && e.preventDefault(); }}
value={this.state.searchText} />
{e.key=='Enter'&&e.preventDefault();}
值={this.state.searchText}/>
(e)=>{e.target.keyCode===13}
(@DavidKamer的答案)不正确:您不需要事件.target。
这是输入字段。你想要活动本身。在React中(目前特别是16.8版),您需要event.key
(e.key,无论您想叫它什么)。防止输入的最佳方法,正如Eon所建议的,是将以下内容添加到您的输入元素中:
onKeyPress={(e) => { e.key === 'Enter' && e.preventDefault(); }}
禁止输入搜索输入的Enter键:
<input type="text" onKeyPress={e => {
if (e.key === 'Enter') e.preventDefault();
}} />
{
如果(e.key==='Enter')e.preventDefault();
}} />
是否有需要使用表单标签的原因?如果您将其替换为div,则enter不会提交。div也会提交word。我在那里有一个表单,以防将来我想添加更多的字段,表单允许更多的控制。如果只有一个输入,这是一个很好的解决方案,在提交级别处理它对于一个有多个控制的表单更好。我的解决方案在很多情况下都会有人在这里。许多人会尝试上述解决方案,结果发现它会阻止表单的每个部分都使用enter键。在您希望其他功能像默认情况下一样继续的情况下,越具体越好。如果表单中只有一个输入或组件不想触发提交函数,那么这是唯一可行的解决方案。其他方法将显式禁用enter按钮,或显式禁用使用html5标准提交,但不会执行要求的操作。谢谢。禁用提交一个单一的输入数正是我想做的。对我来说,e.target.keyCode没有定义,但e.key==='Enter'效果很好。keypress被弃用,第二种形式更适合可读性吗?或者还有其他原因吗?@TroyCosentino其他原因:在第一个e=>{e.preventDefault();}
中,这是一个匿名函数,每个渲染循环都会重新创建,因此react会在子元素中替换它。使用专用处理程序时,函数实例只创建一次,然后保持不变。keypress不推荐使用keypress不推荐使用V17.0.1中键盘事件的反应事件列表为:onKeyDown onKeyPress onKeyUp查看我不知道这些事件是否多填充为未推荐的。我还没有调查过。但是在我上面的例子中,onKeyDown或onkeydup应该可以很好地用于大多数用法--谢谢
onKeyPress={(e) => { e.key === 'Enter' && e.preventDefault(); }}
<input type="text" onKeyPress={e => {
if (e.key === 'Enter') e.preventDefault();
}} />