时间戳

首页 > 解决方案 > 按下回车键而不是单击按钮时不会发生验证

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

问题描述

当我单击按钮时，我有一个登录表单，验证工作正常，但是当我按下回车键时，验证不起作用，我重定向到错误的页面。我有以下功能，该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但它不起作用

标签： javascriptreactjsvalidation

解决方案

由于您所有的 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

推荐阅读