按下回車鍵而不是單擊按鈕時不會發生驗證

Question

當我單擊按鈕時，我有一個登錄表單，驗證工作正常，但是當我按下回車鍵時，驗證不起作用，我重定向到錯誤的頁面。 我有以下 function ，其中存在signin function

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>
        </>
    );
}
}

我在下面有這個 function 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 ，但它不起作用

Answer 1

由於您的所有 html 都是正確的，因此請嘗試將： onKeyPress="return handleChange(event)" function 添加到您的所有輸入中。

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