15

我构建了自己的 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 中设置禁用选项的正确语法是什么？

4

3 回答 3

21

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

<option value="" disabled={this.props.defaultDisabled ? true : null} >{this.props.defaultLabel}</option>
于 2018-07-04T02:11:20.520 回答
5

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

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

更多信息可以在这里找到

如何避免此类错误

  • 第一步

    1. select为 HTML标签赋予默认值
     <select
       name="originId"
       defaultValue="Choose-origin"
     >
  1. 给option标签value等于 defaultValue的select
     <option
        value="Choose-origin"     // normally in VanillaJS you would use "selected"
        disabled
     >Choose origin</option>
  1. 请记住禁用option标签，以便您拒绝用户单击它。

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

于 2020-01-18T17:34:26.587 回答
1

这应该有效：

    <option 
      value=""
      disabled={this.props.defaultDisabled}
    >
      {this.props.defaultLabel}
    </option>
于 2019-07-11T10:55:09.597 回答