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

Question

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

Answer 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