React 中有条件地禁用 select 选项

Question

我构建了自己的 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>

"disabled" 选项仍然 select 可用并且呈现如下：

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

我认为这是因为禁用选项的正确语法是 <option disabled ></option>，而不是 <option disabled="true" ></option>

但是当我按如下方式格式化我的 JSX 时：

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

我收到一个导致应用程序崩溃的错误。

有条件地将指令值写入带有 JXS 的标记的正确语法是什么and/or有条件地在 React 中设置禁用选项？

Answer 1

您错过了 .props。你也可以使用 null 而不是 false.

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

Answer 2

这应该有效：

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

Answer 3

经过几次尝试，我终于解决了这个问题。

似乎不推荐在 React 中使用 HTML 标签上的 selected 属性。设置默认值的最好方法是使用 defaultValue 如果你使用它，它会在开发中抛出错误并在生产中保持安静。

More info can be found here

如何避免此类错误

第一步
1. 为 HTML select 标签提供默认值

     <select
       name="originId"
       defaultValue="Choose-origin"
     >

给 option 标签 value 等于 select

defaultValue

     <option
        value="Choose-origin"     // normally in VanillaJS you would use "selected"
        disabled
     >Choose origin</option>

记得禁用 option 标签，这样您就可以拒绝用户点击它。

感谢@Neo Choi 和@Bernard Leech 的帮助。

React 中有条件地禁用 select 选项

Conditionally disabled select option in React

reactjs

react-select

select-options

如何避免此类错误