reactjs 在FormDecortor字段中按回车键时停止在React Antd Design中提交表单

nnt7mjpx  于 2023-11-18  发布在  React
关注(0)|答案(2)|浏览(148)

我在Antd react表单中有一个装饰的表单输入,当我按回车键时,默认的表单提交验证会触发,这是我不想要的。我已经给了输入的onPressEnter,但它永远不会被触发,表单提交,所以我想知道如何在Antd中使用React避免这种行为。

<FormInput
                                        validateTrigger={['onBlur']}
                                        rules={[{
                                            type: 'email', message: 'The input is not valid E-mail!',
                                        }]}
                                        form={form}
                                        inputID={"email"}
                                        onPressEnter={this.onPressEnter}
                                    />

<Form onSubmit={this.handleSubmit}

handleSubmit = (e) => {
        console.log("hello");
        e.preventDefault();
    }

字符串

qf9go6mv

qf9go6mv1#

在你的<input />标签中,你可以使用onKeyDown方法来防止默认值,如下所示:

onKeyDown={(e)=> e.keyCode == 13 ? e.preventDefault(): ''}

字符串
我在codesandbox.io上创建了一个工作示例。

deyfvvtc

deyfvvtc2#

我也不会建议这个解决方案,但想修复一些东西,只是因为键代码是不推荐的。你可以使用键代替。

onKeyDown={(e)=> e.key == "Enter" ? e.preventDefault(): ''}

字符串

相关问题