動的に生成されたオプションでSelectのdefaultValueに反応します。

Question

選択をオンにする代わりに、defaultValueまたはvalue propsを使用します。

<select defaultValue="react"> 
<option value="react">React</option> 
<option value="angular">Angular</option> 
</select> 

defaultValueは上記のselectタグで動作します。しかし、ループで生成されたオプションではうまく動作しないようです。

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

defaultValueが宣言されていると、オプションが完全に設定されていない可能性がありますか？

componentDidUpdate()とonChangeというイベントで手動で割り当てることができます。

しかし私の質問です - それを解決するクリーナー（良い）方法はありますか？

ありがとうございました。

Answer 1

おそらくoption_idとoptionsの配列構造に問題があります。またはselectedOptionIdという変数があります。選択したコンポーネントをビルドする方法は問題ありません。私はこのコードは正常に動作しますfiddleを作った

：この問題に実行しているユーザーの場合

render: function() { 
let option_id = [0, 1]; 
let options = [{name: 'a'}, {name: 'b'}]; 
let selectedOptionId = 1 
return (
    <select defaultValue={selectedOptionId}> 
    {option_id.map(id => 
    <option key={id} value={id}>{options[id].name}</option> 
    )} 
    </select> 
) 

}

Answer 2

、あなたの代わりにdefaultValueの、value小道具を使って、目的の機能を得ることができます例：

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