Показывать предупреждающее сообщение только при наличии текста - PullRequest
Новая
       20

Показывать предупреждающее сообщение только при наличии текста

1 голос
/ 29 апреля 2020

У меня есть следующий код на странице аутентификации для управления предупреждающими сообщениями: 

        <div className="messages-wrapper">
          {formik.errors.email && <div className="alert alert-danger">
            <ErrorMessage name="email" />
          </div>
          }
          {formik.errors.password && <div className="alert alert-danger">
            <ErrorMessage name="password" />
          </div>
          }
          {error && <div className="alert alert-danger">{error}</div>}
        </div>

Я понимаю, что иногда в Dom он может иметь <div class="alert alert-danger"></div>, как следствие, в отобразить.

Кто-нибудь знает, как реализовать такое, чтобы мы отображали только панель предупреждений с текстом?

enter image description here

1 Ответ

0 голосов
/ 29 апреля 2020

Обязательно инициализируйте все значения ввода / поля (может быть, вы забыли инициализировать значение для электронной почты?

Я попытался повторить вашу проблему, и я смог увидеть пустой розовая полоса, когда я не инициализирую какое-либо значение поля. 

  ...
<Formik
      initialValues={{ email: "", password: "" }} // <---- correct - both email and password are initialised
      // initialValues={{ password: "" }} // <--- wrong, email is not initialised. With this, there will be empty pink bar issue
      validate={validate}
      onSubmit={(values, actions) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          actions.setSubmitting(false);
        }, 1000);
      }}
  ...

См. этот пример Я создал в codeandbox, если это полезно

Наконец, я не уверен почему у вас есть строка кода {error && <div className="alert alert-danger">{error}</div>}. Просто проверьте это. Удачи.

...