Reactjs: Jsx ternäre Inline einer Komponente (verschachtelte ternären)

Question

Ich habe eine React-Bootstrap <Checkbox >.

Es sieht wie folgt aus:

<Checkbox inline onClick={this.handleInclude}> Include </Checkbox> 

Bei einigen Gelegenheiten ich die Checkbox überprüft werden soll. Die api schlägt vor, Sie folgendermaßen vorgehen, wenn Sie es überprüft werden soll:

<Checkbox checked inline onClick={this.handleInclude}> Include </Checkbox>

So, jetzt will ich nur das checked Schlüsselwort während bestimmter Zustände .. so habe ich versucht, eine ternäre Anweisung:

<Checkbox 
    {this.state.chkbox === true ? "checked" : "" } 
    inline 
    onClick={this.handleInclude}> 
    Include 
</Checkbox> 

Aber das wirft einen Unexpected token Fehler. Wie soll das mit reagieren?

EDIT:

ich vernachlässigt zu erwähnen, dass das Kontrollkästchen in der Tat in einem ternären

{this.state.currentView == "timeline" ? 
     <Checkbox 
     {this.state.chkbox === true ? "checked" : "" } 
     inline 
     onClick={this.handleInclude}> 
     Include 
    </Checkbox> 
: "" 
} 

I Token Störung erhalte eine JSX gewickelt wird, während die inneren { }-Tags in dem ternären Operator.

Answer 1

React behandelt Boolean form inputs mit der checked Eigenschaft.

<input type={"checkbox"} checked={true} /> 
<input type={"checkbox"} checked={false} /> 

Die Komponente sollte für onChange Ereignisse hören, vor allem, wenn es Eingang eine kontrollierte Form ist.

<input type={"checkbox"} checked={this.state.checked} onChange={this.onChange} /> 

Auch leitet:

Beachten Sie, dass bei einem Versuch Änderung für Checkbox und Radioeingänge Handhabung zu normalisieren, Reaktion ein click Ereignis anstelle eines change Ereignis verwendet. In den meisten Fällen verhält sich das wie erwartet, außer beim Aufruf von preventDefault in einem change Handler. preventDefault verhindert, dass der Browser die Eingabe visuell aktualisiert, auch wenn checked umgeschaltet wird. Dies kann entweder umgangen werden, indem der Anruf zu preventDefault entfernt wird, oder indem der Schalter von checked in eine setTimeout gesetzt wird.

Zusammenfassend, rufen Sie nicht event.preventDefault() in Ihrer this.onChange(event) Komponente Methode.

---

bearbeiten

In JSX, die folgende Syntax bedeutet das Gleiche.

<input checked /> 
<input checked={true} /> 

Bitte beachten Sie die boolean attributes section in der Dokumentation.