用动态生成选项选择的反应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

回答

相关问题