Условно отключенный вариант выбора в React - PullRequest
Новая
       29

Условно отключенный вариант выбора в React

0 голосов
/ 04 июля 2018

Я создал свой собственный компонент 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>

Опция «отключен» по-прежнему выбирается и отображается следующим образом: 

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

Ответы [ 2 ]

0 голосов
/ 11 июля 2019

Это должно работать: 

    <option 
      value=""
      disabled={this.props.defaultDisabled}
    >
      {this.props.defaultLabel}
    </option>
0 голосов
/ 04 июля 2018

Вы пропустили .props. И вы также можете использовать null вместо false. 

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