9.7 笔记

知识点整理

知识点1：react中如何解决冒泡问题

使用场景

INFO

自定义一个带有图标的input框。需要对该输入框进行校验(他有一定的前置条件)，点击图标也会触发验证，输入框聚焦也会触发验证。

代码

使用**e.stopPropagation()**来组织冒泡

<ProFormText
 width="md"
 name="itemCode"
 label="关键件料号"
 fieldProps={{
  // 点击图标触发的回调，打开模态框
  // 在打开模态框之前进行判断，是否输入了工单号
  suffix: <SearchOutlined onClick={(e) => {
   e.stopPropagation()
   let data = formRef.current?.getFieldValue("projectId")
   if (!data) {
    message.error("请先输入工单号")
    return undefined
   } else {
    showModal("item")
   }
  }} />,
  // 在聚焦的时候验证工单号是否存在
  onFocus: () => {
   let data = formRef.current?.getFieldValue("projectId")
   if (!data) {
    message.error("请先输入工单号")
    return undefined
   }
  }
 }}
 />

知识点2

使用场景

INFO

代码

项目整理

场景1

描述

INFO

思路

代码

场景2

描述

INFO

思路

代码