首页 > 其他分享 >前端项目实战24-封装一个下拉框组件

前端项目实战24-封装一个下拉框组件

时间:2023-02-12 11:35:26浏览次数:37  
标签:24 封装 string number value 下拉框 IdSelectProp onChange options


import { Select } from "antd";
type SelectProps = React.ComponentProps<typeof Select>;
interface IdSelectProp
extends Omit<SelectProps, "value" | "onChange" | "options"> {
value?: number | string | string | null | undefined;
onChange?: (value: number) => void;
defaultValue?: string;
options?: {
name: string;
id: string;
}[];
}
const IdSelect = (props: IdSelectProp) => {
const { value, onChange, defaultValue, options } = props;
return (
<Select
style={{ width: '200px' }}
onChange={(value) => {
console.log(`selected ${value}`);
}}
>
{options
? options.map((item) => {
return (
<Select.Option key={item.id} value={item.id}>
{item.name}
</Select.Option>
);
})
: null}
</Select>
);
};

export default IdSelect;

标签:24,封装,string,number,value,下拉框,IdSelectProp,onChange,options
From: https://blog.51cto.com/u_15460007/6052003

相关文章