导读

产品经理突然觉得Select 都应该是可清空的，可过滤的，事实上这也很合理。
然后你发现需要一个一个Select改...

正文

一个默认的Select组件

          <Select defaultValue="1" style={{ width: 120 }}>
            <Select.Option value="1">时间管理者</Select.Option>
            <Select.Option value="2">多人运动</Select.Option>
            <Select.Option value="3">极限挑战</Select.Option>
            <Select.Option value="4">挑战极限</Select.Option>
          </Select>

可清除、可搜索后的Select

          <Select
            showSearch
            defaultValue="1"
            style={{ width: 120 }}
            allowClear
            optionFilterProp="children"
            filterOption={(input, option) =>
              option!.children
                .toLowerCase()
                .indexOf(input.toLowerCase()) >= 0
            }>
            <Select.Option value="1">时间管理者</Select.Option>
            <Select.Option value="2">多人运动</Select.Option>
            <Select.Option value="3">极限挑战</Select.Option>
            <Select.Option value="4">挑战极限</Select.Option>
          </Select>

其实我们无非是想给Select组件一个默认值

1. 避免增加额外的概念

2. 保持灵活性

第一步就是F12进去把Select的组件的约束拿过来

declare class Select<ValueType extends SelectValue = SelectValue> extends React.Component<SelectProps<ValueType>>

虽然这个语法有些突兀，但丝毫不影响我们黏贴复制

import React from "react";
import Select, { SelectProps, SelectValue } from "antd/lib/select";
class PageSelect<
  ValueType extends SelectValue = SelectValue
> extends React.Component<SelectProps<ValueType>> {
  static defaultProps = {
    showSearch: true,
    allowClear: true,
    optionFilterProp: "children",
    filterOption: (input: string, option: any) =>
      option!.children.toLowerCase().indexOf(input.toLowerCase()) >=
      0,
  };

  public render() {
    const { children, ...restProps } = this.props;
    return <Select {...restProps}>{children}</Select>;
  }
}
export default PageSelect;

这个组件在使用上和antd的Select一摸一样哦

          <PageSelect defaultValue="1" style={{ width: 120 }}>
          ...
          </PageSelect>

现在我想给个默认的width

interface PageSelectProps {
  width: number;
}
React.Component<SelectProps<ValueType> & PageSelectProps>

static defaultProps = {
    width: 120,

const { width, children, ...restProps } = this.props;
    return (
      <Select style={{ width }} {...restProps}>

就可以

<PageSelect defaultValue="1" width={200}>

再见