MySelectTag代码块如下:
import React, { useState } from 'react';
import { Select } from 'antd';
/**
* @param initialValue 默认值
* @param onChange 值改变时调用方法
* @param isSingle 是否单选
* @param data 选项初始值
* @returns {*}
* @constructor
*/
const MySelectTag = ({ value: initialValue, onChange, isSingle = false,data }) => {
const [ value, setValue ] = useState(initialValue);
const onSelectionChange = (value) => {
setValue(isSingle && value.length > 1 ? value.slice(value.length - 1) : value);
onChange(isSingle && value.length > 1 ? value.slice(value.length - 1) : value);
};
return (
<Select
style={{width:"100%"}}
mode="tags"
value={value}
filterOption={false}
onChange={onSelectionChange}
>
{
data.map((item) => {
return <Select.Option key={item.key}>{item.value}</Select.Option>
})
}
</Select>
)
};
export default MySelectTag;
调用代码如下:
const data=[{key:"a",value:"a"},{key:"b",value:"b"},{key:"c",value:"c"}];
<MySelectTag
isSingle={true}
data={data}
/>