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

最新推荐文章于 2024-04-25 12:39:31 发布

前端歌谣

最新推荐文章于 2024-04-25 12:39:31 发布

阅读量203

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_41632427/article/details/126814263

版权

前端记录-work-react-最近工作专栏收录该内容

212 篇文章 3 订阅

订阅专栏


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;