三元运算符（Inline If without Else）

Posted 2023-02-23

【中文标题】三元运算符（Inline If without Else）

【英文标题】：Ternary Operator (Inline If without Else)

【发布时间】：2018-02-22 23:56:17

【问题描述】：

我在一个<form> 中有两个checkbox。 <form> 有一个 onChange=this.checkBoxOnChange 分配给它，它会在表单的每次更改时触发 checkBoxOnChange(event).. 函数。我正在尝试将状态 (Log) 映射到状态（即它们是否被检查）。所以，我最初将那里的值设为false，因为它们没有被检查，然后在每个事件上我试图分别更改那里的值（即如果为假，则为真，反之亦然）。

在关注this SO 帖子时，我尝试了这个：

(event.target.value=='BILLDED') && billed=(!billed)       

通过这样做，我得到：

语法错误：赋值表达式左侧无效

然后我尝试了这个：

(event.target.value=='BILLDED') ? (billed=(!billed)) : null        

但是，它会在每个 onChange 上给我 BILLED:true（当点击 BILLED checkbox 时） 这是渲染方法中的复选框代码：

render() 
    return (
      <div>
      <form onChange=this.checkBoxOnChange>
        <input type="checkbox" name="invoicestatus" value="BILLDED" />BILLDED<br />
        <input type="checkbox" name="invoicestatus" value="PENDING" />PENDING<br />
      </form>
      <ListData data=this.state.data/>
    </div>
    );
  

这是同一类（组件）中的checkBoxOnChange() 函数：

   checkBoxOnChange(event)
    var billed=false;
    var pending=false;
  //  (event.target.value=='BILLDED') ? (billed=(!billed)) : null;
    (event.target.value=='BILLDED') && billed=(!billed)
  //  (event.target.value=='PENDING') ? pending=(!pending) : null;
    console.log("BILLDED:"+billed+"  PENDING:"+pending);
  

代码有什么问题？ 我不能在这种情况下使用内联语句吗？ 有没有更好、更简洁的方法？

【参考方案1】：

代码有什么问题？

您将事件处理程序中的billed 变量初始化为false，这就是为什么您总是得到true 而不是切换状态。

我不能在这种情况下使用内联语句吗？

可以，只需将括号放在正确的位置：

(event.target.value == 'BILLDED') && (billed = !billed);
//                                   ^

有没有更好更简洁的方法？

使用普通的if 语句。它更短且更具可读性：

if (event.target.value == 'BILLDED') billed = !billed;

【讨论】：

知道了。你能告诉我那将是初始化它们的理想位置吗？那么在this.state() 里面constructor 里面呢？因为 React 中没有全局变量的规定..

是的，让它成为国家的一部分听起来是个好主意。当然，除了记录它之外，它还取决于您想要对值做什么。

【参考方案2】：

但是，它在每次 onChange 时都会给我 BILLED:true （单击时 计费复选框）

这不是因为你使用了如下局部变量吗

var billed=false;

总是以false开头？

【讨论】：

是的，但它不应该在每次点击事件时改变吗？

@NiladriSekharBasu 从您发布的代码中没有。为什么会呢？ （它会改变，但改变不会持续对吗？因为这是一个局部变量）。

好的。明白我的错误了。但是，那么它应该在哪里声明呢？在this.state() 也许？由于 React 没有任何类变量的规定..

@NiladriSekharBasu 我认为您应该研究一下所谓的“受控组件”。