Блог

Главная - Вопросы по программированию - Установите для имени класса по умолчанию пустую строку, затем укажите два условия

Установите для имени класса по умолчанию пустую строку, затем укажите два условия

#reactjs #react-hooks #conditional-operator #classname

#reactjs #реагирующие крючки #условный оператор #имя_класса

Вопрос:

У меня есть это условие className={errors.firstName ? "invalid" : "valid"}

Но мне нужно, чтобы по умолчанию использовалась пустая строка, если ни одно из этих условий не выполнено.

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

Мне придется вызывать это несколько раз для других полей текстовой области, поэтому я знаю, что мне нужно сделать это повторно.

Комментарии:

1. Теперь у вас есть два статуса, true или false . Итак, у вас должен быть начальный статус like initialStatus , и тогда вы сможете достичь того, чего хотите, вот так: className={(errors.firstName === 'initialStatus')?"":(errors.firstName)? "invalid":"valid"}

2. Если мой комментарий непонятен, скажите мне, можете ли вы initialStatus это сделать или нет. так что я могу сделать для вас фрагмент

3. Хорошо, итак, я создал переменную intialState и установил для нее значение false , я также попытался установить для нее пустую строку, но она по-прежнему устанавливает стиль по умолчанию valid , а не initialState

4. Нет, Вы не поняли, что я имел в виду. послушайте, просто укажите начальное значение для errors.firstName called initialStatus , а затем используйте условие, которое я опубликовал. Короче говоря, вам нужно иметь три статуса для errors.firstName . Вы можете сделать это любым доступным вам способом. И я сказал первое, что пришло мне в голову. (теперь у вас есть два статуса true и false . вам нужно три. просто создайте еще одно)

Ответ №1:

Вы могли бы использовать https://www.npmjs.com/package/classnames для этого.

className={classNames({ invalid: errors.firstName === true }, { valid: errors.firstName === false })

Так что, если errors.FirstName = true тогда className будет invalid . Если errors.FirstName = false тогда так и будет valid . Если errors.FirstName равно undefined className, это будет пустая строка.

Ответ №2:

Давайте представим, что ваша ошибка FirstName изначально не существует или инициализируется с помощью null в объекте errors.

 const errors = { firstName: null } // or not having firstName

Затем проверьте наличие ошибки firsName (которая может иметь тип string, например, сообщение об ошибке FirstName или любое логическое значение).

 <Component
  className={
    // if you explicitly set it to null use strict in-equality here
    errors.firstName != null ? "" : errors.firstName ? "invalid" : "valid"
  }
/>;

вы также можете запретить установку пустой строки по умолчанию, вызвать ее по умолчанию 🙂

 <Component
  {...(errors.firstName != null amp;amp; {
    className: errors.firstName ? "invalid" : "valid",
  })}
/>;