多重反应形式输入禁用的onsubmit

我有一个非常简单的例子如预期那样工作： https://jsfiddle.net/x1suxu9h/多重反应形式输入禁用的onsubmit

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> 
    ) 
    } 
});

我是否在这里缺少明显的东西？

来源

2016-11-03 David

的可能的复制[按提交形式没有提交按钮输入（http://stackoverflow.com/questions/477691/提交表单 - 按下输入 - 没有提交按钮） –

这不是一个基于反应的问题。 https://www.w3.org/TR/html5/forms.html#implicit-submission/ http://stackoverflow.com/questions/477691/submitting-a-form-by-pressing-enter-without-a-提交按钮/ http://stackoverflow.com/questions/925334/how-is-the-default-submit-button-on-an-html-form-determined – thirtydot

只需将提交按钮添加到您的表格 – Beginner

通常只需按下回车键时聚焦一个表单元素不提交它，你会使用一些专门提交（如提交按钮或事件处理程序在按下提交它进入）

然而，默认情况下，如果整个表单中只有一个文本输入，那么按下Enter键就会提交它（这是一些HTML规范）。但是，手动处理表单提交是一件好事。

所以，如果你补充一点：

<button type='submit' />

到表单中，是否有一个或两个或50文本输入还是会提交

来源

2016-11-03 11:55:01 Jayce444

* Spot on * 。请注意将来的读者：如果您在该按钮的click事件中使用preventDefault，则在按下输入时，submithandler将不会触发：https：//jsfiddle.net/3mL50u9c/：/ – David

可以使用onKeyPress代替onSubmit作为一种解决方法，东西这样

var Hello = React.createClass({ 
    getInitialState: function() { 
    return { msg: '' } 
    }, 
    onSubmit: function(e) { 
    e.preventDefault(); 
    console.log(e.currentTarget); // <-- Form 
    this.setState({ msg: 'submitted' }) 
    }, 
    onKeyPress: function(e) { 
    if(e.key === 'Enter') 
     this.onSubmit(e); 
    }, 
    render: function() { 
    return (
     <form onKeyPress={this.onKeyPress}> 
     <input type="text" /> 
     <input type="text" /> 
     <div>{this.state.msg}</div> 
     </form> 
    ) 
    } 
});

jsfiddle

来源

2016-11-03 12:00:57 QoP

包含类型的输入“提交”就足够了表单提交

<input type="submit">

来源

2016-11-05 12:08:45 SunDontShine

多重反应形式输入禁用的onsubmit

回答

相关问题