按下回车键而不是单击按钮时不会发生验证答案

【问题标题】：Validation is not happening when enter key is pressed instead of clicking button按下回车键而不是单击按钮时不会发生验证
【发布时间】：2021-04-23 19:25:26
【问题描述】：

当我单击按钮时，我有一个登录表单，验证工作正常，但是当我按下回车键时，验证不起作用，我重定向到错误的页面。我有以下函数，其中存在signin 函数

renderSignIn() {
    const {
        state,
        onSignInAttempt,
        onSignInSuccess,
        onFormError,
        handleForgotPassword,
        handleCreateAccount
    } = this.props;

    return (
        <>
            <Form
              key="sign-in"
              onSubmit={ onSignInAttempt }
              onSubmitSuccess={ onSignInSuccess }
              onSubmitError={ onFormError }
            >
                <Field
                  type="text"
                  label={ __('Email') }
                  id="email"
                  name="email"
                  validation={ ['notEmpty', 'email'] }
                  placeholder={'Enter your email address'}
                />
                <Field
                  type="password"
                  label={ __('Password') }
                  id="password"
                  name="password"
                  validation={ ['notEmpty', 'password'] }
                  placeholder={'Enter password'}
                />
                <button
                  block="Button"
                  mods={ { likeLink: true } }
                  onClick={ handleForgotPassword }
                >
                    { __('Forgot password?') }
                </button>
                <div block="MyAccountOverlay" elem="Buttons">
                    <button block="Button">{ __('Sign in') }</button>
                </div>
                <div block="MyAccountOverlay" elem="SignInConditions">
                <p block="SignInTerms">By Signing In, you agree to <a href="">Terms of use</a> and<a href="">Privacy Notice.</a></p>  
                </div>
                
            </Form>
            <article block="MyAccountOverlay" elem="Additional" mods={ { state } }>
                <section>
                    <h4 id="forgot-password-label">{ __('New here?') }</h4>
                    <button
                      block="Button"
                      onClick={ handleCreateAccount }
                    >
                        { __('Create an account') }
                    </button>
                </section>
            </article>
        </>
    );
}
}

我下面有这个功能hanldeForgotPassword()

handleForgotPassword(e) {
    const { setHeaderState } = this.props;
    e.preventDefault();
    e.nativeEvent.stopImmediatePropagation();
    this.setState({ state: STATE_FORGOT_PASSWORD });
    setHeaderState({ name: CUSTOMER_ACCOUNT, title: 'Forgot password' });
}

我该如何解决它，我尝试添加 div 而不是 button 但它不起作用

【问题讨论】：

似乎您的所有按钮都是提交按钮（默认为type="submit"），我怀疑在关注表单中的任何位置时按下回车键会提交它。您能否提供更准确的重现来说明导致问题的原因？
你的 js 中有重定向逻辑吗？
@Toxy 我的 js 中没有任何重定向
检查页面是否有任何其他表单或在该页面中输入 type='submit' 而不是组件整个页面。
@Toxy 在同一个组件中还有另外两个函数 `

标签： javascript reactjs validation

【解决方案1】：

由于您的所有 html 都是正确的，因此请尝试在您的所有输入中添加：onKeyPress="return handleChange(event)" 函数。

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

来源：https://stackoverflow.com/a/38575630/11492378

【讨论】：