Question

我正在尝试使其在触发useState setErrors

时发生

我想发生的是，当您单击if (!above18 && agreeToTerms) { setErrors({ detail: })}按钮并发送那些复选框Register和above18的状态时，如果以上两个条件都弹出一个错误被满足。

原因是，如果同时满足两个复选框的要求，则必须添加其他信息。我希望禁用agreeToTerms按钮，直到他们提交我们要求的其他信息。

我尝试仅在实际的register上将disabled参数添加为<Button>，并且如果该复选框为空并且选中了条款复选框，则只会禁用<Button disabled={if (!above18)}按钮。

我在这里遇到的问题是，状态永远不会提交，因此错误不会弹出。

不确定什么代码是最相关的atm，但是我只是将这些部分发送给我处理，似乎与我有关。

Register

我正在谈论的按钮位于页面返回值的底部，因此简而言之

if (!above18) {
      // $FlowFixMe
      setErrors({ detail:
  <div>
    <p>If you are under 18 years of age, you need a parent or guardian with a HitchPin account to approve your account. </p>
    <InputGroup className="mb-0">
      <InputGroupAddon addonType="prepend">
        <InputGroupText>
          <i className="icon-user" />
        </InputGroupText>
      </InputGroupAddon>
      <Input
        type="text"
        placeholder="Parent or Guardian Email"
        autoComplete="username"
        value={username}
        onChange={e => setUsername(e.target.value)}
        invalid={errors.username || errors.email}
        data-cy="email"
      />
      <FormFeedback>
        {errors.username && <p>{errors.username}</p>}
        {errors.email && <p>{errors.email}</p>}
      </FormFeedback>
    </InputGroup>
    <InputGroup className="mb-1">
      <InputGroupAddon addonType="prepend">
        <InputGroupText>
          <i className="icon-lock" />
        </InputGroupText>
      </InputGroupAddon>
      <Input
        type="password"
        placeholder="Parent or Guardian Password"
        autoComplete="current-password"
        value={password}
        onChange={e => setPassword(e.target.value)}
        invalid={errors.password && errors.password.length}
        data-cy="password"
      />
      <FormFeedback>
        {errors.password && errors.password.length && (
          <ul>
            {errors.password.map(e => <li>{e}</li>)}
          </ul>
        )}
      </FormFeedback>
    </InputGroup>
    <Button
      color="success"
      block
      onClick={doRegister}
      data-cy="login"
    >
      Verify Child Account
    </Button>
  </div> })
      return
    }

我是React的新手。

发生特定错误时如何禁用按钮

0 个答案: