web-dev-qa-db-ja.com

警告：<option>で 'selected'を設定する代わりに、<select>で 'defaultValue'または 'value'の小道具を使用してください

シナリオユーザーにドロップダウンがあり、オプションを選択します。そのドロップダウンを表示し、そのオプションをそのユーザーが前回選択したデフォルト値にしたい。

オプションでselected属性を使用していますが、Reactは選択時にデフォルト値を使用するように求める警告を生成します。

たとえば.

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を見つけるにはどうすればよいですか？

reactjsselectdropdown
18
Piyush

Reactは、フォームコンポーネント全体で一貫性を保つために、valueの代わりに selected を使用します。 defaultValueを使用して、初期値を設定できます。 値を制御する の場合は、valueも設定する必要があります。そうでない場合は、valueを設定せず、代わりにonChangeイベントを処理してユーザーのアクションに対応します。

注valueおよびdefaultValueは、オプションのvalueと一致する必要があります。

29
ryanjduffy

デフォルト値を選択せず​​にプレースホルダーを設定するインスタンスでは、このオプションを使用できます。

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

ここで、ユーザーはオプションを選択する必要があります！

編集

これが制御されたコンポーネントである場合

この場合、デフォルト値を使用しないでください。

 function TheSelectComponent(props){
     let currentValue = props.curentValue || "DEFAULT";
     return(
      <select value={currentValue} 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>
    )
}
10
Dehan de Croos

できることは、<select>タグのselected属性を、コンストラクターで設定した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>
  );
}
6
Sammy I.