标签: select-options

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

在 vuetify 的 v-select 组件上使用“item-disabled”道具时遇到问题。我正在尝试将其与文字选项一起使用。

这是重现问题的片段：

在这个例子中，我想禁用“Buzz”选项。

Vue.use(Vuetify)

new Vue({
  el: '#app',
  data: () => ({
    items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
    disabledItems: ['Buzz'],
  })
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.14/vuetify.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.14/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-container fluid grid-list-xl>
      <v-layout wrap align-center>
        <v-flex xs12 sm6 d-flex>
          <v-select :items="items" :item-disabled="disabledItems" box label="Box style"></v-select>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

<v-select :items="items" :item-disabled="disabledItems"></v-select>
...
items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
disabledItems: ['Buzz'],

我确实意识到我可以像在这个例子中那样使用非文字键值对：https : //codepen.io/anon/pen/joyoaj，它会起作用。但是我宁愿不必编写包装器组件来将文字选项转换为键值来解决这个问题。

<v-select :items="items"></v-select>
... …

我试图在选择选项列表中添加添加搜索过滤器，因为有很多选项，并且我认为如果没有搜索，用户将很难找到他要选择的选项。

我希望你能理解我，因为我不会英语。

这是我的代码（这只是表的一部分）

<ng-container *ngFor="let menaceProcessus of menaceProcessusTab">
    <tr>
         <td colspan="4" bgcolor="#f1f1f1"><b>{{menaceProcessus?.processus?.nom}}</b></td>
    </tr>
    <ng-container *ngFor="let actif of menaceProcessus?.actifs">
        <tr>
            <td [rowSpan]="actif?.menaces?.length+1">{{actif?.actif?.nom}}</td>
        </tr>
     <ng-container *ngFor="let mnVuln of actif?.menaces">
        <tr>
             <td>{{mnVuln?.vulnerabilite?.nom}}</td>
             <td>
                 <select class="form-control" 
                  (change)="mnVuln?.menaceActif?.menace.id = $event.target.value; 
                            updateMenaceProcessus()">
                      <option></option>
                      <option *ngFor="let menace of menaces" 
                          [value]="menace.id" 
                          [selected]="menace.id === mnVuln?.menaceActif?.menace.id">
                        {{menace.nom}}</option>
                  </select>
              </td>
              <td>
                 <input class="form-control" 
                    type="text" [value]="mnVuln?.menaceActif?.probabilite"> 
              </td>
          </tr>
      </ng-container>
    </ng-container>
 </ng-container>