Ternärer Operator (Inline, wenn ohne)

Question

Ich habe zwei checkbox in einem <form>. Der <form> ist eine onChange={this.checkBoxOnChange} zugewiesen, die checkBoxOnChange(event){..} Funktion bei jeder Änderung in der Form auslöst. Ich versuche, (Log) den Status (dh ob sie überprüft werden oder nicht). Also habe ich anfangs dort Wert als false genommen, da sie nicht überprüft werden dann bei jedem Ereignis versuche ich dort den Wert zu ändern (dh wenn der falsche & umgekehrt ist).

Auf folgenden this SO poste ich dies versucht:

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

Auf diese Weise erhalte ich:

Syntax error: Invalid left-hand side in assignment expression

Dann habe ich versucht, dies:

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

aber es gibt mir BILLED:true auf jedem onChange (wenn auf BILLEDgeklickt wird)
Dies ist Code für Checkbox innerhalb Methode machen:

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

Dies ist die checkBoxOnChange() Funktion innerhalb derselben Klasse (Component):

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

• Was mit dem Code falsch?
• Kann ich keine Inline-Anweisung für dieses Szenario verwenden?
• Gibt es einen besseren, prägnanteren Ansatz?

Answer 1

What's wrong with the code?

Sie initialisieren die billed Variable in Ihrem Ereignishandler false, das ist, warum Sie immer true einen Zustand erhalten statt Makeln.

Can I not use inline statement for this scenario?

Sie können, müssen Sie nur noch die Klammer an der richtigen Stelle setzen:

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

Is there any better, more concise approach?

Verwenden Sie eine normale if Aussage. Es ist kürzer und besser lesbar:

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

Answer 2

However, it gives me BILLED:true on every onChange (when clicked on BILLED checkbox)

Dies ist nicht, weil Sie eine lokale Variable, wie unten

var billed=false; 

zu benutzen, die immer als false beginnt?