用動態生成選項選擇的反應defaultValue

使用defaultValue或value props，而不是選擇on。用動態生成選項選擇的反應defaultValue

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

defaultValue將與上述選擇標籤一起使用。但是，它似乎不適用於循環生成的選項。

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

在聲明defaultValue時可能沒有完全設置選項？

我可以在componentDidUpdate()和onChange事件中做手動分配。

但我的問題是 - 有沒有更清潔（更好）的方法來解決它？

謝謝。

來源

2016-07-05 Mingu

很可能你的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> 
)

}

來源

2016-07-05 05:57:11

感謝您的回答。我想我的問題是因爲選擇組件首次初始化時，那些選項值不存在。在我的場景中，選擇組件是先安裝的，然後只有當用戶點擊特定鏈接時纔會拉取數據。我更新了你的[fiddle]（https://jsfiddle.net/jhkcow8r/3/）來展示我的場景。 – Mingu

對於運行到這個問題的用戶，可以通過使用道具value獲得所期望的功能，而不是defaultValue ，例如：

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

來源

2017-07-28 18:32:35 hellojebus

用動態生成選項選擇的反應defaultValue

回答

相關問題