React 中有条件地禁用选择选项

IT技术 reactjs react-select select-options

2021-05-02 13:52:19

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

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

在 React 中使用 JXS 有条件地将指令值写入标签和/或有条件地设置禁用选项的正确语法是什么？

3个回答

你错过了一个.props. 你也可以使用null代替false。

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

几次后，我终于解决了这个问题。

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

更多信息可以在这里找到

如何避免此类错误

步骤1
1. 为 HTMLselect标签提供默认值

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

给option标记value等于 defaultValueofselect

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

请记住禁用option标签，以便您拒绝用户单击它。

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

这应该有效：

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

其它你可能感兴趣的问题

上一篇如何以编程方式“打开” Material-UI Select 字段？下一篇带有 redux 的进度条