reactjs - 三元运算符(内联如果没有其他)

Question

我有两个checkbox在 <form> 。 <form>有一个onChange={this.checkBoxOnChange}分配给它，它会启动 checkBoxOnChange(event){..}函数对表单中的每一个变化都起作用。我正在尝试映射(日志)状态(即它们是否被选中)。所以，我最初将其值设为 false因为它们没有被检查，所以在每个事件上我试图分别更改它们的值(即如果为 false，则为 true，反之亦然)。

关注this所以我尝试过这个帖子:

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

通过这样做我得到:

Syntax error: Invalid left-hand side in assignment expression

然后我尝试了这个:

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

但是，它给了我 BILLED:true每 onChange (点击“账单”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

What's wrong with the code?

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

Can I not use inline statement for this scenario?

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

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

Is there any better, more concise approach?

使用正常的if陈述。它更短且更具可读性:

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