複数選択の選択肢に反応する

Question

私は複数選択リストを初期化しようとしていますが、現在は期待どおりに動作します。しかし、html select属性は出力されず、クロームコンソールに次の警告が表示されます。

'selected'をオンに設定する代わりに 'defaultValue'または 'value'小道具を使用してください。

データ：

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

探しているもので、それはあなたを助けることを願っています。ありがとう！