web-dev-qa-db-ja.com

Reactの条件付きで無効な選択オプション

自分でReact selectコンポーネントを作成しました。デフォルト値をdisabledに設定するオプションが必要です

コンポーネントは基本的に次のようになります。

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

私に問題を与えているこの行は次のとおりです。

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

「無効」オプションは引き続き選択可能で、次のように表示されます。

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

無効なオプションの正しい構文は<option disabled ></option>ではなく<option disabled="true" ></option>であるためだと思います

しかし、次のようにJSXをフォーマットすると：

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

アプリをクラッシュさせるエラーが表示されます。

JXSで条件付きでディレクティブ値をタグに書き込む、および/またはReactで無効なオプションを条件付きで設定するための正しい構文は何ですか？

reactjsreact-selectselect-options
10
yevg

.props。また、nullの代わりにfalseを使用することもできます。

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

これは動作するはずです：

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