antd中select下拉框值为对象选中的问题

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

1.效果图

image.png

2.select相关代码

  • 我这里用的是react
let list = [
    {
      title: '普通会员',
      id: 1
    },{
      title: '测试专用人员',
      id: 2
    }, {
      title: '测试专用人员',
      id: 3
    }
];
let currentEditOption: {
    roleId: '',
    title: '',
};

<Select
  value={currentEditOption.title}
  style={{width: '70%'}}
  suffixIcon={<Icon type="caret-down"/>}
>
  {
    list.map((item:any) =>
      <Option key={item.id} value={item.title}>{item.title}</Option>
    )
  }
</Select>
  • 下拉框事件
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.
image.png
  • 按照我的理解,select下拉框应该是去检测key值而不检测value值的,但是,我设置key值后,还是会检测value值
  • 当然,你这里可以去掉value值的设置,它也能实现下拉选择后,onchang能获取到对应的数据,但我想实现的是,当select中有选中值的时候,option选项中对应的值应该是选中状态的
  • 然后,我就尝试了多次,还设置过optionLabelProp这个属性,没有用,开始的时候,我也设置过labelInValue,不过,我传入value值不是对象,导致我开始尝试的时候放弃了labelInValue属性的设置,后面又重新尝试,发现OK了,并且,这个时候,必须同时设置option中的value和key属性值
<Select
  labelInValue
  value={{key: currentItem.roleId, label:currentItem.title}}
  style={{width: '70%'}}
  onChange={handleSelect}
  suffixIcon={<Icon type="caret-down" />}
  getPopupContainer={(triggerNode: any) => triggerNode.parentNode}
>
  {
    list.map((item:any) =>
      <Option key={item.id} value={item.id}>{item.title}</Option>
    )
  }
</Select>
  • 下拉框的选择事件
/* 定义下拉框选择 */
handleSelect = (value:any, option: any) => {
    /* 此时value值是一个对象 */
    console.log(value)
    /* option返回的是option对应的整个对象 */
    console.log(option)
};

3.option组件出现位置偏移

  • 在弹窗组件中使用select时,当点击Select组件出现下拉选项后滚动原始页面,出现下拉选项和Select框分离现象
  • 这个时候就可以用官方提供的方式来防止位置偏移
image.png
image.png
  • 在select中直接加入这个方法getPopupContainer={triggerNode => triggerNode.parentNode}

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

正在努力学习中,若对你的学习有帮助,留下你的印记呗(点个赞咯^_^)
阅读 850更新于 11月28日
推荐阅读
目录