地址选择器 新增输入功能正则表达式

src/components/AddressDrawer/AddressDrawer.tsx

+import { debounceFn, throttleFn } from '@/utils/throttleFn';
+import { useDebounce } from '@umijs/hooks';
 import { Button, Col, Drawer, Form, FormInstance, Input, Radio, Row, Select, Space } from 'antd';
 import React, { useContext, useEffect, useState } from 'react';
 import AddressForm from './AddressForm';
@@ -46,14 +48,42 @@ function AddressDrawer(props: AddressDrawerProps) {
   const [addrForm] = Form.useForm(formInstance);
   const [addrList, setAddrList] = useState([]);
 
+
+  const handleInputChangeHooks = debounceFn((str) => {
+    
+    const val: string = str
+    const reg = /.+?(省|市|自治区|自治州|镇|县|区)/g;
+    const maths = val.match(reg);
+    
+    if (maths && maths.length >= 3) {
+      //至少 拥有省市区 才进行处理
+      const slice: string = maths[maths.length - 1];
+      const addressOther: string = val.slice(val.indexOf(slice) + slice.length, val.length)
+      const otherSplit = addressOther.split(" ");
+      let propValue = {
+        provinceName: tryGetMatchValue(maths, 0),
+        cityName: tryGetMatchValue(maths, 1),
+        districtName: tryGetMatchValue(maths, 2),
+        streetName: tryGetMatchValue(maths, 3),
+        address: tryGetMatchValue(otherSplit, 0),
+        receiverName: tryGetMatchValue(otherSplit, 1),
+        phone: tryGetMatchValue(otherSplit, 2),
+        fullAddress: tryGetMatchValue(maths, 0) + tryGetMatchValue(maths, 1) + tryGetMatchValue(maths, 2) + tryGetMatchValue(maths, 3) + tryGetMatchValue(otherSplit, 0)
+      }
+      
+      onChange(propValue)
+    }
+  }, 1000);
+
   useEffect(() => {
     renderAddressList().then(data => {
       if (addr) {
         // props 更新 内部状态更新 用于FormItem 的操作
-        setValue(addr)
+        let targetValue = `${addr?.fullAddress ?? ''} ${addr?.shipperName ? addr?.shipperName : addr?.receiverName ?? ''} ${addr?.phone ?? ''}`
+        setValue(targetValue)
       } else if (showDefault) {
         // 如果没有默认值，且设置了 showDefault
-        const target = data.find(v=>v.isDefault ===1)
+        const target = data.find(v => v.isDefault === 1)
         setValue(target)
         onChange(target)
       }
@@ -96,7 +126,7 @@ function AddressDrawer(props: AddressDrawerProps) {
         form={addrForm} />
   }
 
-  function renderAddressFormBtnGroup() {
+  const renderAddressFormBtnGroup = () => {
     if (showForm) {
       return <Button type='primary' onClick={sumbitAddressForm}>提交</Button>
     } else {
@@ -104,11 +134,28 @@ function AddressDrawer(props: AddressDrawerProps) {
     }
   }
 
+  const handleInputChange = (e) => {
+    const targetValue = e.target.value;
+    setValue(targetValue)
+    handleInputChangeHooks(targetValue)
+  }
+
+  const tryGetMatchValue = (maths, i) => {
+    try {
+      return maths[i] || ''
+    } catch {
+      return ""
+    }
+  }
+
   return (
     <AddressRaioContextProvider value={addrList}>
       <Row gutter={10}>
         <Col span={20}>
-          <Input.TextArea rows={rows} disabled={true} value={`${value?.fullAddress ?? ''} ${value?.shipperName ? value?.shipperName : value?.receiverName ?? ''} ${value?.phone ?? ''}`} />
+          <Input.TextArea rows={rows} disabled={disabled}
+            value={value}
+            onChange={handleInputChange}
+          />
         </Col>
 
         <Col span={4}>

src/utils/throttleFn.ts

+export const throttleFn = (fn, delay) => {
+  let valid = true
+  return function (...args) {
+    if (!valid) {
+      return false;
+    }
+    valid = false;
+    setTimeout(() => {
+      fn(...args)
+      valid = true
+    }, delay);
+  }
+}
+let timer = null;
+export const debounceFn = (func, delay) => {
+  return function (...args) {
+    if (timer) {
+      clearTimeout(timer)
+    }
+    timer = setTimeout(() => {
+      func(...args)
+    }, delay);
+  }
+}
\ No newline at end of file