爲多個選擇反應選定的選項

Question

我想要初始化一個多選列表並且它當前按預期工作。但它不會輸出HTML選擇屬性，我在Chrome控制檯中看到以下警告：

使用'defaultValue'或'value'屬性而不是設置'selected'。

數據：

const MemberList = [ 
    {Text: "Administrator", Selected: true}, 
    {Text: "Power User", Selected: false}, 
    {Text: "User", Selected: true}, 
    {Text: "Guest", Selected: true}, 
]; 

組件：

<select multiple disabled className="m-t-20"> 
    {MemberList.map((member, index) => 
     <option key={`member-${index}`} selected={member.Selected}>{member.Text}</option> 
    )} 
</select> 

我怎樣才能做到正確的方式，因爲我無法找到足夠做出反應的文檔。

Answer 1

這裏是你在找

const Option = (props) => { 
    return <option 
     value={props.value} 
     defaultValue={props.selected}> 
     {props.text} 
    </option> 
} 

const MultipleSelectExample =() => { 
    return <select multiple defaultValue={['foo1','foo2']}> 
     <Option text={'foo'} value={'foo1'}/> 
     <Option text={'baz'} value={'foo2'}/> 
     <Option text={'zaz'} value={'foo'}/> 
     <Option text={'kaz'} value={'foo'}/> 
    </select> 
} 

希望它會幫助你。謝謝！