由于FormattedMessage没有禁用按钮

时间:2019-07-16 05:50:29

标签: html reactjs fieldset react-intl disable

我已经将表单元素放置在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>

0 个答案:

没有答案