在 className `if` 语句中反应 `or` 条件

Question

我有一个 React 应用程序，想在满足一个或另一个条件时更改 CSS class。我该怎么做？

因此，如果 validation 或 validationNoExist 是 false 那么 CSS class 应该是 input-form-validation-wrong，如果两者都正确则第一个 class 被选中。

这是我的代码：

<input type="email"  className={validation || validationNoExist ? 'input-form' : 'input-form-validation-wrong'} placeholder="E-Mail" />

Answer 1

<input type="email"  className={(validation || validationNoExist) ? 'input-form' : 'input-form-validation-wrong'} placeholder="E-Mail" />

Answer 2

这可能只是对逻辑运算符进行分组的问题，因此它们被评估为三元条件测试的一个单元。对于 return“输入形式”的三元组，它们都需要为真。

<input
  type="email"
  className={(validation && validationNoExist) ? 'input-form' : 'input-form-validation-wrong'}
  placeholder="E-Mail"
/>

console.log((false && false) ? 'input-form' : 'input-form-validation-wrong');
console.log((true && false) ? 'input-form' : 'input-form-validation-wrong');
console.log((false && true) ? 'input-form' : 'input-form-validation-wrong');
console.log((true && true) ? 'input-form' : 'input-form-validation-wrong');

在 className `if` 语句中反应 `or` 条件

React `or` condition in className `if` statement

css

conditional-operator

reactjs