三元运算符（Inline If without Else）

Question

我在一个<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);
  }

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

Answer 1

代码有什么问题？

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

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

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

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

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

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

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

Answer 2

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

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

var billed=false;

总是以false开头？