Question

我正在使用React和React Bootstrap。当输入值为空时，我需要将一个类应用于输入，而当输入值被填充时，则需要应用其他类。

我有下一个代码：

            <FormGroup>
             <ControlLabel>Username</ControlLabel>
             <FormControl className={this.value==""?"empty":"no-empty")} type="text" value="" />
            </FormGroup>

我的问题是className始终是“无空”。如果value =“”，则className为“ no-empty”；如果value =“ xyz”，则className为“ no-empty”。

我不知道它是否相关，但是当我将input：valid和input：invalid应用于react中的输入时，看起来所有输入都是有效的。

预先感谢您的帮助。

Answer 1

我看到您仍在花时间学习JS，所以让我指出Operator Precedence。

您自己的答案包含this.props.username==""||undefined?"empty":"no-empty")（在撰写本文时）-让我们忽略语法错误（不匹配的)）并分析运算符：

… ? … : …是具有条件4的 Conditional
… || …是优先级为5的逻辑或
… == …是一个优先级为10的平等

...这意味着this.props.username==""将在||部分之前被评估，因此false||undefined或true（另请参见{{ 3}}）。

恕我直言，在这种情况下检查空值的最佳（可读性最高）代码只是检查this.props.username是否为Short-circuit evaluation（""，undefined以外的其他代码），null，false或0）：

className={this.props.username ? "no-empty" : "empty"}

Answer 2

最后，这段代码对我有用：

cannot pass more than 100 arguments to a function

谢谢。

Answer 3

尝试通过以下方式重写代码：

        <FormGroup>
     <ControlLabel>Username</ControlLabel>
     <FormControl className={this.value==!!(this.value)?"empty":"no-empty")} type="text" value="" />
    </FormGroup>

使用React和React Bootstrap的输入是否为空时的验证问题

3 个答案: