antd中select下拉框值爲對象選中的問題

時間 2020-01-31

標籤 antd select 下拉對象選中問題简体版

原文原文鏈接

使用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: '',
};

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

按照個人理解，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)
};