reactjs - 有条件地禁用 React 中的选择选项

Question

我构建了自己的 React 选择组件，并希望有一个选项将默认值设置为 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 中有条件地设置禁用选项的正确语法是什么？

Answer 1

您错过了 .props。您还可以使用 null 代替 false。

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