如何防止在输入字段中按回车键时发生重定向？

我有一个带有电子邮件输入的表格。

<form action="." method="post">
    <div id="email-wrapper">
        <input type="text" placeholder="Your email" name="email" ref="email" onChange={this.handleChange}/>
    </div>
    <span class="signup-error">Please provide a valid email.</span>
</form>
....
....
<button id="next-btn" onClick={this.saveAndContinue}>Next</button>

当按下按钮时，我使用简单的正则表达式进行验证，以确认它是一个电子邮件地址，并且工作正常。但是，如果我按 Enter 键（key=13），它重定向到其他页面，这是我看到的错误：

无法发布/

我以为这个脚本可以解决这个问题，但它没有：

handleChange = (event) => {
    event.preventDefault();
    var keyCode = event.keyCode || event.which;
    if (keyCode == '13'){
        console.log('enter pressed');
    }
}

这是怎么回事？如何防止在输入字段中按 Enter 键时发生重定向？请你帮助我好吗。谢谢。

这是因为当您按回车键时，操作就会在表单上完成。因此，您需要从表单中捕获操作并防止默认。

您可以使用相同的事件处理程序onsubmit形式的

<form action="." onsubmit={this.saveAndContinue} method="post">
....