web-dev-qa-db-fra.com

Option de sélection conditionnellement désactivée dans React

J'ai construit mon propre composant React select et je voudrais avoir une option pour définir la valeur par défaut à disabled

Le composant ressemble essentiellement à ceci:

<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>

Cette ligne me donnant le problème est la suivante:

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

L'option "désactivé" est toujours sélectionnable et se présente comme suit:

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

Je pense que c'est parce que la syntaxe correcte pour une option désactivée est <option disabled ></option>, ne pas <option disabled="true" ></option>

Mais quand je formate mon JSX comme suit:

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

Je reçois une erreur qui bloque l'application.

Quelle est la syntaxe correcte pour écrire conditionnellement une valeur de directive dans une balise avec JXS et/ou définir conditionnellement une option désactivée dans React?

reactjsreact-selectselect-options
10
yevg

Vous avez manqué un .props. Et vous pouvez également utiliser null au lieu de false.

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

Cela devrait fonctionner:

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