1. ホーム
  2. reactjs

[解決済み] Warning: Use the 'defaultValue' or 'value' props on <select> instead of setting 'selected' on <option>

2023-04-21 09:24:53

Question

SCENARIO A user has a dropdown and he selects an option. I want to display that dropdown and make that option a default value which was selected by that user last time.

I am using selected attribute on option but React generates a warning asking me to use default value on select.

For e.g.

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>
    )
  }
});

Problem is that I don't know the selectedOptionId as the selected option could be any option. How would I find the defaultValue ?

どのように解決するのですか?

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

注意 その valuedefaultValue が一致する必要があります。 value に一致する必要があります。