Предупреждение. Используйте реквизиты 'defaultValue' или 'value' для <select> вместо установки 'selected' on <option>

СЦЕНАРИЙ У пользователя есть выпадающий список, и он выбирает опцию. Я хочу отобразить этот раскрывающийся список и сделать этот параметр значением по умолчанию, которое было выбрано этим пользователем в последний раз.

Я использую атрибут selected для опции, но React выдает предупреждение, в котором предлагается использовать значение по умолчанию для select.

Например,

render: function() {
    let option_id = [0, 1];
    let options = [{name: 'a'}, {name: 'b'}];
    let selectedOptionId = 0

    return (
      <select defaultValue={selectedOptionId}>
        {option_id.map(id =>
        <option key={id} value={id}>{options[id].name}</option>
        )}
      </select>
    )
  }
});

Проблема в том, что я не знаю selectedOptionId, поскольку выбранный параметр может быть любым. Как мне найти defaultValue?

Ответ 1

React использует value вместо selected для согласованности между компонентами формы. Вы можете использовать defaultValue для установки начального значения. Если вы контролируете значение, вы также должны установить value. Если нет, не устанавливайте value и вместо этого обрабатывайте событие onChange чтобы реагировать на действие пользователя.

Обратите внимание, что value и defaultValue должны соответствовать value параметра.

Ответ 2

В случае, если вы хотите установить местозаполнитель и не иметь значения по умолчанию, вы можете использовать эту опцию.

      <select defaultValue={'DEFAULT'} >
        <option value="DEFAULT" disabled>Choose a salutation ...</option>
        <option value="1">Mr</option>
        <option value="2">Mrs</option>
        <option value="3">Ms</option>
        <option value="4">Miss</option>
        <option value="5">Dr</option>
      </select>

Здесь пользователь вынужден выбрать опцию!

EDIT

Если это контролируемый компонент

К сожалению, в этом случае вам придется использовать и defaultValue, и значение, немного нарушающее React. Это связано с тем, что реагирование по семантике не позволяет устанавливать отключенное значение как активное.

 function TheSelectComponent(props){
     let currentValue = props.curentValue || "DEFAULT";
     return(
      <select value={currentValue} defaultValue={'DEFAULT'} onChange={props.onChange}>
        <option value="DEFAULT" disabled>Choose a salutation ...</option>
        <option value="1">Mr</option>
        <option value="2">Mrs</option>
        <option value="3">Ms</option>
        <option value="4">Miss</option>
        <option value="5">Dr</option>
      </select>
    )
}

Ответ 3

Вы можете сделать, чтобы selected атрибут <select> был атрибутом this.state, установленным в конструкторе. Таким образом, начальное значение, которое вы установили (по умолчанию), и когда выпадающие изменения вам нужно изменить ваше состояние.

constructor(){
  this.state = {
    selectedId: selectedOptionId
  }
}

dropdownChanged(e){
  this.setState({selectedId: e.target.value});
}

render(){
  return(
    <select value={this.selectedId} onChange={this.dropdownChanged.bind(this)}>
      {option_id.map(id =>
        <option key={id} value={id}>{options[id].name}</option>
      )}
    </select>
  );
}