自分で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で無効なオプションを条件付きで設定するための正しい構文は何ですか?
.props
。また、null
の代わりにfalse
を使用することもできます。
<option value="" disabled={this.props.defaultDisabled ? true : null} >{this.props.defaultLabel}</option>
これは動作するはずです:
<option
value=""
disabled={this.props.defaultDisabled}
>
{this.props.defaultLabel}
</option>