june30项目总结

指定 input Event类型

// React.ChangeEvent<HTMLInputElement>

<Input
        value={addName}
        onChange={(e: React.ChangeEvent<HTMLInputElement>) => saveName(e.target.value)}
        className={styles['drop-inp']}
    />

https://s2.seikim.com/i/2022/06/30/11360gv.png

指定 select 的 option 在 select 标签下

//  getPopupContainer={triggerNode => triggerNode.parentNode as HTMLElement}

// 不这样绑定的话，option 节点在body上。

<Select
    ref={selectRef}
    showSearch
    className={styles.toExamineSelect}
    placeholder="请选择名单分类"
    optionFilterProp="children"
    getPopupContainer={triggerNode => triggerNode.parentNode as HTMLElement}
    dropdownRender={menu => renderDropDown(menu)}
>
    ...
</Select>
 
https://s2.seikim.com/i/2022/06/30/1170iey.png

指定react Icon 类型

// React.MouseEvent<HTMLSpanElement, globalThis.MouseEvent>

https://seikim.com/i/2022/06/30/115d93d.png

为 react 元素、子组件 定义的 useRef 类型

const selectRef: MutableRefObject<any> = useRef(null);

// 这样定义在调用时 不会提示对象可能未定义  selectRef.current.blur()

select 给定undefined 出现placehloder

https://s2.seikim.com/i/2022/06/30/119gpk3.png

https://s2.seikim.com/i/2022/06/30/119mco0.png

select option 是有点击事件的

点击 select 的option ， option 默认是有事件的，这个事件会把值给到select， 并且关闭弹窗。

从 option 内部的 icon 组件的点击事件 中 阻止冒泡可以看出这一点，如果不阻止冒泡，icon点击事件触

发的同时，下拉框会收起来，反之不会收起。

https://seikim.com/i/2022/06/30/11b6lhd.png

https://seikim.com/i/2022/06/30/11befqm.png

antd badge 小圆点

// 有了这个，就再也不用自己去画小圆点了。

// 瞧，这个包裹了钟表 icon 的 badge , 将会显示红色的 icon
<Badge count={show ? <ClockCircleOutlined style={{ color: '#f5222d' }} /> : 0} />

// 这个将展示一个四边有圆角的矩形
<Badge count={show ? 25 : 0} />

// 这个的展示效果是图标右上角有一个红色圆点
<Badge dot>
  <NotificationOutlined style={{ fontSize: 16 }} />
</Badge>

// 这个也是，只是变成了一段英文
<Badge dot>
  <a href="#">Link something</a>
</Badge>

// 表示状态的小圆点
<Badge status="processing" />
<Badge status="warning" />

// 这里的右边会出现文字
<Badge status="success" text="Success" />
<Badge status="error" text="Error" />
<Badge status="default" text="Default" />

// 彩色缎带，这就像你的卡片右边出现了一个彩色书签
<Badge.Ribbon text="Hippies" color="pink">
  <Card title="Pushes open the window" size="small">
    and raises the spyglass.
  </Card>
</Badge.Ribbon>

// Badge 可以指定多种颜色，red 、pink ...

// 也可以自定义颜色

<Badge color="#2db7f5" text="#2db7f5" />

// Badge有如此多的妙用，还何必自己去写，这样方便省时又好看。

##### antd 指定 icon 颜色



<CloseCircleFilled style={{color: '#e23c39'}} />

antd pageHeader 标准页头

extra b表示自由最右侧 reactNode

取出interface 的一项类型

https://seikim.com/i/2022/07/04/bs1yum.png

antd table 自带分页的妙用

table 表格有pagination 分页属性，传布尔值控制显示与否，传对象配置分页，这种对象的传法与单独引入分页组件一般无二！

因此可以在绝大多数情况下使用自带分页。

https://seikim.com/i/2022/07/04/btgbev.png