我已经将表单元素放置在fieldset标记内,并且在登录请求的情况下,我想禁用表单的其他元素,以使用户无法与表单进行交互。为此,我将字段集禁用,这将导致所有字段都被禁用,但是具有FormattedMessage的按钮不会被禁用。我找不到原因。请帮助。
<StyledForm id="myStyledForm">
<FieldSet disabled={loading}>
<div>
<BackButton onClick={onBack} />
<Header>
<FormattedMessage {...messages.title} />
</Header>
</div>
<ErrorWrapper>
{(error || emailError || passwordError) && (
<Errors>{renderError(error, emailError, passwordError)}</Errors>
)}
</ErrorWrapper>
<InputField
id="email"
name="email"
type="email"
value={email}
placeholder={intl.formatMessage({ ...messages.email })}
onChange={(event) => onEmailChanged(event.target.value)}
onBlur={() => validateEmail(email)}
onKeyPress={onKeyPress}
/>
<InputField
id="password"
name="password"
type="password"
value={password}
placeholder={intl.formatMessage({ ...messages.password })}
onChange={(event) => onPasswordChanged(event.target.value)}
onBlur={() => validatePassword(password)}
onKeyPress={onKeyPress}
/>
<StyledLinkWrapper>
<StyledLink onClick={() => navigateTo("/forgotpassword")}>
<FormattedMessage {...messages.forgotPassword} />
</StyledLink>
</StyledLinkWrapper>
<ButtonRowWrapper>
<CreateAccountButtonWrapper>
<StyledButton
type="button"
onClick={navigateToCreateAccountUpsell(email, password, false)}
>
<FormattedMessage {...messages.createAccount} />
</StyledButton>
</CreateAccountButtonWrapper>
<SigninButtonWrapper>
<StyledButton
type="submit"
disabled={disableButton || error === 401}
onClick={onSubmit}
>
{loading && <StylizedLoadingIndicator backgroundColor="#fff" />}
{!loading && <FormattedMessage {...messages.submit} />}
</StyledButton>
</SigninButtonWrapper>
</ButtonRowWrapper>
</FieldSet>