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

 
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;