import React, { FC } from "react";
import { Raw } from "../types";
import { Select } from "antd";
type SelectProps = React.ComponentProps<typeof Select>
interface IdSelectProps extends Omit<SelectProps, "value" | "onChange" | "options"> {
value: Raw | null | undefined;
onChange: (value?: number) => void;
defaultOptionName?: string;
options?: { name: string, id: number }[];
}
export const IdSelect: FC<IdSelectProps> = (
{ value, onChange, defaultOptionName, options,...restProps }) => {
return <Select
{...restProps}
onChange={value => onChange(toNumber(value) || undefined)}
value={toNumber(value)}>
{
defaultOptionName ? <Select.Option value={0}>{defaultOptionName}</Select.Option> : null
}
{
options?.map(option => <Select.Option key={option.id} value={option.id}>{option.name}</Select.Option>)
}
</Select>;
};
const toNumber = (value: unknown) => isNaN(Number(value)) ? 0 : Number(value);
react 封装antd组件 props透传ts类型处理: React.ComponentProps
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 函数式组件适用于‘简单组件’的定义； 类式组件适用于‘复杂组件’的定义。 有状态（state）的就是复杂组件， 反...
- 第一个组件 CommentInput 给按钮添加点击事件 第二个组件 第一步引入组件 方法
- tip：之前写了一个裁剪 但是有bug（参考之前的文章） 现在又遇见这个功能 终究是躲不过了 现已解决之前出现的...
- 封装react组件经常会封装一些复合组件，比如手风琴，轮播图，等等……与常规组件不一样，复合组件经常会遇到一个问题...
- Protable 业务封装 基于 Antd Protable 及 ahooks 的表格组件业务封装 Protabl...
