bug：select组件多选时value不起作用

一车鸡蛋

已于 2023-01-13 15:17:54 修改

阅读量1.1k

点赞数 1

文章标签： react.js typescript

于 2022-03-22 15:49:27 首次发布

本文链接：https://blog.csdn.net/Realizee/article/details/123661788

版权

本文介绍了在使用Ant Design Select组件进行多选时，遇到的问题：当value值为字符串数组而非对象时可能导致错误。关键在于正确存储和传递选择的值，建议将value设为ItemProps对象数组，并演示了如何设置和更新state。

摘要由CSDN通过智能技术生成

现象：

定位：

注意下面两点就解决了，费了半天的功夫，才发现 多选的value会去option对象中去检测，然后显示选择的内容，如果传入的不是对象，就会导致找不到，value就不起作用了

1. 多选时value为 string[ ]

2. 存储选择的value时，不能只存储选择的值，而是整个对象 ItemProps[ ]

interface ItemProps {
label: string;
value: string;
}

value起作用的代码：

import { Select, Space } from 'antd';
const options = [];

interface ItemProps {
  label: string;
  value: string;
}

const options: ItemProps[] = [];

for (let i = 10; i < 36; i++) {
  const value = i.toString(36) + i;
  options.push({
    label: `Long Label: ${value}`,
    value,
  });
}

const Demo = () => {
  //const [value, setValue] =useState<string[]>([]);
  const [value, setValue] =useState<ItemProps[]>([]);
 
  let selList:string[] =[];
  value.forEach((item)=>{
    selList.push(item.vlue);
  });

  return (
    <Space
      direction="vertical"
      style={{
        width: '100%',
      }}
    >
      <Select 
         mode='multiple',
         //value={selValue},
         value={selList},   //注意点一
         options,
         onChange: (newValue,options) => {
           // newValue为string[],options为ItemProps[]
           //setValue(newValue);

           setValue(options);    //注意点二
         },
         placeholder: '请选择',
         maxTagCount: 'responsive',
      ></Select>
    
    </Space>
  );
};

ReactDOM.render(<Demo />, mountNode);