Summer 的文档

主题

9.15 笔记 ​

项目整理 ​

场景1 下拉菜单内容随着页面的滚动而滚动 ​

描述 ​

INFO

模态框里面使用了下拉框，但是下拉项自定义并且数目比较多，所以下拉框就需要滚动，但是当整个页面滚动的时候，下拉框也会随着滚动

思路 ​

注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用**getPopupContainer={triggerNode => triggerNode.parentElement}******将下拉弹层渲染节点固定在触发器的父元素中。****。

代码 ​

jsx
<ProFormSelect
 width="md"
 name="bomCode"
 label="机种料号"
 showSearch
 placeholder="请选择"
 // request发送请求获取
 request={async ({ keyWords }) => {
  let res = await getBomData({ pageSize: 10, current: 1, bomCode: keyWords })
  if (res.success) {
   setBomTable(res.data)
  }
  return []
 }}
 // 校验规则
 rules={[
  {
   required: true,
   message: '请选择机种料号!',
  },
 ]}
 // 设置防抖时间
 debounceTime={500}
 // 自定义下拉框内容
 fieldProps={{
  // 设置下拉框的内容,是一个表格
  dropdownRender: () => {
   return (
    <div style={{ height: '200px', overflowY: 'auto' }}>
     <Table
      size="small"
      showHeader={false}
      columns={bomColumns}
      dataSource={bomTable}
      pagination={false}
      rowKey={(record: { bomCode: string, bomName: string, bomSpec: string }) => record.bomCode}
      // 设置点击行的时候，将数据回填到表单中
      onRow={(record: { bomCode: string, bomName: string, bomSpec: string }) => {
       return {
        onClick: () => {
         // 首先将表单数据全部清空,然后再设置值
         formRef.current?.setFieldsValue({
          // 此处省略
         })
         formRef.current?.setFieldsValue({
          // 不重要省略
         })
         setIsOptionsOpen(false)
        }
       }
      }}
      />
    </div>
   )
  },
  // 当清空的时候，将表单的值也清空
  onClear: () => {
   formRef.current?.setFieldsValue({
    bomName: "",
    bomSpec: "",
   })
  },
  // 当下拉框打开的时候，将isOptionsOpen设置为true
  onDropdownVisibleChange: (open: boolean) => {
   setIsOptionsOpen(open)
  },
  open: isOptionsOpen,
  // 让下拉框不随页面的滚动而滚动
  getPopupContainer: (triggerNode: any) => triggerNode.parentNode,
 }}
 >

</ProFormSelect>

场景2 “EventTarget”上不存在属性“value” ​

描述 ​

INFO

在使用input的onPressEnter事件，需要读取到当前输入的内容，很明显需要使用e.target.value，但是出现了typescript的错误校验

思路 ​

这时候我们需要告诉Typescript我们的类型是HTMLElement类型

代码 ​

jsx
export const pressTerminalSn = ({ e }: IPressTerminalSn) => {
 const target = e.target as HTMLInputElement;
 console.log(target.value)
}

参考链接 ​

类型“EventTarget”上不存在属性“value”

场景3 模态框+表单的销毁不彻底问题 ​

描述 ​

INFO

使用了Modal里面是一个表单，我们希望，当模态框销毁以后，里面的数据全部清除，modal销毁可以使用destoryOnClose，但未对Form数据清空

思路 ​

  1. 官网描述，可以使用<Form preverse={false} />

  1. 也可以不用官网的方法，你可以直接去控制表单的ref，然后在每次moal点击确定或者取消的时候手动去进行设置