如何避免此类错误

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”选项仍然可以选择，并且呈现如下：

<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>

Answer 2

一段时间后，我终于解决了这个问题。

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

More info can be found here

如何避免此类错误

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

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

赋予option标记与value的{{1}}相等的defaultValue

select

请记住禁用<option value="Choose-origin" // normally in VanillaJS you would use "selected" disabled >Choose origin</option>标签，以便您拒绝用户单击它。

谢谢@Neo Choi和@Bernard Leech寻求帮助。

Answer 3

这应该有效：

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

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

3 个答案:

如何避免此类错误