it-swarm.com.de

Bedingt deaktivierte Auswahloption in React

Ich habe meine eigene React select-Komponente erstellt und hätte gerne die Option, den Standardwert auf disabled zu setzen.

Die Komponente sieht im Grunde so aus:

<select
    id={this.props.id}
    name={this.props.name}
    value={this.props.value}
    defaultValue={this.props.default}
    onClick={this.handleFieldClick}
    onChange={this.handleFieldChange} >

         <option value="" disabled={this.defaultDisabled ? true : false} >{this.props.defaultLabel}</option>

         { Object.keys(this.props.options).map((val, i) => ( 
             <option key={i} value={val}>{this.props.options[val]}</option>
         ))}

 </select>

Diese Zeile gibt mir das Problem wie folgt:

<option value="" disabled={this.defaultDisabled ? true : false} >{this.props.defaultLabel}</option>

Die Option "deaktiviert" ist weiterhin auswählbar und wird folgendermaßen wiedergegeben:

<option value="" selected="">Default Option</option>

Ich glaube, das liegt daran, dass die korrekte Syntax für eine deaktivierte Option <option disabled ></option> Und nicht <option disabled="true" ></option> Ist.

Aber wenn ich mein JSX wie folgt formatiere:

<option value="" {this.defaultDisabled ? "disabled" : ""} >{this.props.defaultLabel}</option>

Ich erhalte eine Fehlermeldung, die die App zum Absturz bringt.

Was ist die richtige Syntax zum bedingten Schreiben eines Anweisungswerts in ein Tag mit JXS und/oder zum bedingten Setzen einer deaktivierten Option in React?

10
yevg

Sie haben einen .props Verpasst. Und Sie können auch null anstelle von false verwenden.

<option value="" disabled={this.props.defaultDisabled ? true : null} >{this.props.defaultLabel}</option>
13
Neo Choi

Das sollte funktionieren:

    <option 
      value=""
      disabled={this.props.defaultDisabled}
    >
      {this.props.defaultLabel}
    </option>

0
Bernard Leech