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

Posted 2023-02-23

【中文标题】在 className `if` 语句中反应`or` 条件

【英文标题】：React `or` condition in className `if` statement

【发布时间】：2021-07-04 01:35:57

【问题描述】：

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

所以，如果validation 或validationNoExist 是false，那么CSS 类应该是input-form-validation-wrong，如果两者都正确则选择第一个类。

这是我的代码：

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

【参考方案1】：

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

<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');

【参考方案2】：

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