Question

我正在寻找一种在不使用附加库的情况下在纯React中创建多选下拉列表的好方法。

目前，我正在执行以下操作：

<select className='yearlymeeting' multiple={true}>
    <option value=''>Yearly Meeting</option>
    {
        this.state.meeting.yearly_meeting.map((m: Meeting, i: number) => {
            return (
                <option
                    value={m.title}
                    key={i}
                    selected={this.state.selectedTitles.yearlyMeetingTitles.includes(m.title) ? true : false}>
                    {m.title}
                </option>
             );
         })
     }
</select>

此代码“有效”，但我收到此警告：

Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.

Answer 1

来自react docs-

可以传递一个数组的值属性，允许你在一个选择标记选择多个选项：

<select multiple={true} value={['B', 'C']}>

我觉得你只需要你选择的项目数组传递给select元素的值的道具。

Answer 2

可以直接在“ select”元素中设置值，而不是检查条件并在“ option”元素中设置“ selected”道具。警告应该消失。

<select className='yearlymeeting' multiple={true} 
value={this.state.selectedTitles.yearlyMeetingTitles}>
<option value=''>Yearly Meeting</option>
{
    this.state.meeting.yearly_meeting.map((m: Meeting, i: number) => {
        return (
            <option
                value={m.title}
                key={i}
                {m.title}
            </option>
         );
     })
 }
</select>

如何实现多选择下拉在阵营

2 个答案: