Question

我的问题是关于反应，onSubmit和preventDefault。

我有一张表格，可根据具体情况处理两到四步的用户输入。

<Form>
{StepRendersHere}
</Form>

表单有一个onSubmit事件，可以防止默认（和stopPropagation）。

使用按钮进行＆＃34;下一步＆＃34;事件触发，表单未提交。但是当使用回车键时，会触发事件，但会发布表单。这会导致站点刷新表单数据作为url参数。奇怪的是，如果表单中没有任何按钮具有type =＆＃34;提交＆＃34;。 onSubmit甚至不会触发输入键。

isDefaultPrevented在两种情况下都返回true。

关于如何在按Enter键时阻止表单发布的任何提示/想法？我的问题是使用Enter键发布表单，尽管是preventDefault。

尝试将enter键绑定到阻止默认的事件，但不起作用。可能会以错误的方式完成它。

更新（实施）

<Form onSubmit={this.inc_step} id="applicationform">
{FormStepRenderedHere}
</Form>

inc_step = e => {
    e.preventDefault();
    e.stopPropagation();
    alert( e.isDefaultPrevented() )
    let new_step = this.state.current_step + 1;
    alert('INSIDE INC STEP');
    if (this.validateForm()) {
        this.setState({
            current_step: new_step
        })
    }
}

更新（固定IT）

我找到了一个解决方案，想要分享是否有其他人遇到同样的问题。然而，我的解决方案对于语义ui来说可能是独一无二的，我正在使用它。我通过在表单上放置as = {Form.Group}来解决它，将其作为表单呈现，并使用其标准事件，例如输入密钥提交。现在输入键什么也没做，就像我想要的那样。

感谢您的评论！

Answer 1

我找到了一个解决方案，想要分享是否有其他人遇到同样的问题。然而，我的解决方案可能是我正在使用的语义ui所独有的。我通过在表单上放置as = {Form.Group}来解决它，将其作为表单呈现，并使用其标准事件，例如输入密钥提交。现在输入键什么也没做，就像我想要的那样。

所以实际上并没有将表单呈现为一个开头的表单是解决方案。

Answer 2

更简单的方法是在表单中添加一个按钮元素，并添加display none css属性（如果您不想看到该按钮）。

该按钮会自动为onSubmit添加使用Enter键的功能。

使用回车键时，onSubmit不会触发

2 个答案: