Я использую React-Bootstrap и в настоящее время пытаюсь выяснить, как выдать ошибку при неправильном вводе данных пользователем.

Например, вход пользователя в систему, после того как пользователь нажмет кнопку входа , введенный ниже текст будет содержать красную метку. Пример ошибки * Имя пользователя и пароль не совпадают.

Я немного покопаюсь, мне не удалось найти этот пример, но я нашел (обязательное) поле, но это не для моего случая.

Мой код, как показано ниже:

<Form>
   <Label>UserName</Label>
       <InputGroup className="mb-3">
             <Input type="text" onChange={this.Username} placeholder="Enter UserName" />
       </InputGroup>
   <Label>Password</Label>
        <InputGroup className="mb-4">
              <Input type="password" onChange={this.Password} placeholder="Enter Password" />
        </InputGroup>
<Form.Control.Feedback type="valid" color="danger" tooltip>*Username and Password Incorrect</Form.Control.Feedback>
          Button onClick={this.Login} color="success" block>Login</Button>
</Form>

Но похоже, что Form.Control.Feedback не работает.

Требования

  1. Я использую React Js
  2. Я использую библиотеку React-bootstrap https://react-bootstrap.github.io/components/ формы /

Как мне выполнить действие, о котором я упоминал выше?

-1
Lawraoke 15 Июн 2020 в 06:16

1 ответ

Лучший ответ

Используете ли вы метод form.checkValidity() внутри обработчика кнопки отправки?

  const handleSubmit = (event) => {
    const form = event.currentTarget;
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }

    setValidated(true);
  };

0
Pavel Petrovich 15 Июн 2020 в 03:38