我有一个按预期工作的非常简单的例子:
https://jsfiddle.net/x1suxu9h/
var Hello = React.createClass({
getInitialState: function() {
return { msg: '' }
},
onSubmit: function(e) {
e.preventDefault();
this.setState({ msg: 'submitted' })
},
render: function() {
return (
<form onSubmit={this.onSubmit}>
<input type="text" />
<div>{this.state.msg}</div>
</form>
)
}
});
但是 ,当添加另一个表单字段时,按下回车键时不再触发 onSubmit : https://jsfiddle.net/nyvt6506/
var Hello = React.createClass({
getInitialState: function() {
return { msg: '' }
},
onSubmit: function(e) {
e.preventDefault();
this.setState({ msg: 'submitted' })
},
render: function() {
return (
<form onSubmit={this.onSubmit}>
<input type="text" />
<input type="text" />
<div>{this.state.msg}</div>
</form>
)
}
});
我在这里错过了明显的东西吗?
最佳答案
通常只是在聚焦表单元素时按 Enter 键不会提交它,您会使用一些东西来专门提交它(例如提交按钮或事件处理程序在按下 Enter 键时提交它)
但是,默认情况下,如果整个表单中只有一个文本输入,则按 Enter 提交它(这是一些 HTML 规范)。但是,最好手动处理表单提交。
所以如果你添加这个:
<button type='submit' />
到您的表单,无论是一两个还是 50 个文本输入,它仍会提交
关于javascript - 多个 react 表单输入禁用 onSubmit,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40400633/