Question

我正在尝试初始化一个多选列表，它目前按预期工作。但是它没有输出html select属性，我在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>

我怎样才能以正确的方式做到，因为我找不到足够的React文档。

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

希望它会对你有所帮助。谢谢！

为多个选择重新选择所选选项

1 个答案: