多重反應形式輸入禁用的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

回答

相關問題