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

Question

我有一个包含电子邮件输入的表单。

<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 键时发生重定向？请你帮助我好吗。谢谢你。

Answer 1

尝试处理该onKeyPress事件。return false当在函数中按下 Enter 键时，您将需要这样做handleChange。您需要handleChange在事件接线中返回函数的返回值；就像是

<input type="text" onKeyPress="return handleChange(event)" />

总之，你可以尝试：

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

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