使用antd中的select下拉框，遇到个小问题，后台管理系统中，使用下拉框，一般不会是简单的就直接使用select中的value值，而是会使用id或者value中文对应的keyword，并且这个在option中的value值也是可能重复的

1.效果图

2.select相关代码

我这里用的是react

let list = [

{

title: '普通会员',

id: 1

},{

title: '测试专用人员',

id: 2

}, {

title: '测试专用人员',

id: 3

}

];

let currentEditOption: {

roleId: '',

title: '',

};

value={currentEditOption.title}

style={{width: '70%'}}

suffixIcon={}

>

{

list.map((item:any) =>

{item.title}

)

}

下拉框事件

handleSelect = (value:any, option: any) => {

console.log(value)

/* option返回的是option对应的整个对象 */

console.log(option)

};

此时，并没有出现问题，但是，一旦list中有两项的title字段是以一样的，浏览器就报警告

Warning: Encountered two children with the same key, `.$测试专用人员`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

按照我的理解，select下拉框应该是去检测key值而不检测value值的，但是，我设置key值后，还是会检测value值

当然，你这里可以去掉value值的设置，它也能实现下拉选择后，onchang能获取到对应的数据，但我想实现的是，当select中有选中值的时候，option选项中对应的值应该是选中状态的

然后，我就尝试了多次，还设置过optionLabelProp这个属性，没有用，开始的时候，我也设置过labelInValue，不过，我传入value值不是对象，导致我开始尝试的时候放弃了labelInValue属性的设置，后面又重新尝试，发现OK了，并且，这个时候，必须同时设置option中的value和key属性值

labelInValue

value={{key: currentItem.roleId, label:currentItem.title}}

style={{width: '70%'}}

onChange={handleSelect}

suffixIcon={}

getPopupContainer={(triggerNode: any) => triggerNode.parentNode}

>

{

list.map((item:any) =>

{item.title}

)

}

下拉框的选择事件

/* 定义下拉框选择 */

handleSelect = (value:any, option: any) => {

/* 此时value值是一个对象 */

console.log(value)

/* option返回的是option对应的整个对象 */

console.log(option)

};

3.option组件出现位置偏移

在弹窗组件中使用select时，当点击Select组件出现下拉选项后滚动原始页面，出现下拉选项和Select框分离现象

这个时候就可以用官方提供的方式来防止位置偏移

在select中直接加入这个方法getPopupContainer={triggerNode => triggerNode.parentNode}

4.在vue中使用element-ui时，也出现过这种value值是对象的情况

正在努力学习中，若对你的学习有帮助，留下你的印记呗(点个赞咯^_^)

作者：小小蚊子