🎈 perf(InputX组件): 修复input 组件输入过快会出现闪烁的问题

project.private.config.json

@@ -225,6 +225,13 @@
           "query": "orderId=31776",
           "launchMode": "default",
           "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/searchPage/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
         }
       ]
     }

src/components/BottomCustomer/index.tsx

@@ -1,5 +1,5 @@
-import { View, ScrollView, Image, Input, Button } from '@tarojs/components'
+import { View, Button } from '@tarojs/components'
-import { useCallback, useEffect, useMemo, useRef, useState, memo } from 'react'
+import { memo } from 'react'
 import styles from "./index.module.scss"
 import classnames from "classnames";
 import Taro from '@tarojs/taro'

src/components/InputX/index.tsx

@@ -0,0 +1,24 @@
+import { CustomWrapper, Input, View } from "@tarojs/components"
+import React, { FC } from "react"
+// 解决 input 组件输入过快会出现闪烁的问题
+// https://github.com/NervJS/taro/issues/9664
+interface PropsType {
+  customClassName?: string
+  customStyle?: React.CSSProperties
+  customInputStyle?: React.CSSProperties
+  customInputClassName?: string
+  [Property: string]: any
+}
+const InputX: FC<PropsType> = (props) => {
+  const {customClassName, customStyle,customInputStyle, customInputClassName,...inputProps} = props
+  console.log('props', props);
+  return (
+    <View className={customClassName} style={customStyle}>
+      <CustomWrapper>
+        <Input className={customInputClassName} style={customInputStyle} {...inputProps} ></Input>
+      </CustomWrapper>
+    </View>
+  )
+}
+
+export default InputX

src/components/counter/index.tsx

@@ -1,8 +1,9 @@
-import { Input, View } from "@tarojs/components"
+import { View } from "@tarojs/components"
-import { useEffect, useMemo, useRef, useState } from "react"
 import Big from 'big.js'
 import styles from "./index.module.scss"
 import { usePropsValue } from "@/use/useCommon"
+import InputX from "../InputX"
+
 type params = {
     minNum?: number, //最小值
     maxNum?: number, //最大值
@@ -116,7 +117,7 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0,
           -
         </View>
         <View className={styles.input} onClick={noop}>
-          <Input value={String(value)} onInput={onInputEven} onBlur={onBluerEven} type='digit' disabled={disable} />
+          <InputX value={String(value)} onInput={onInputEven} onBlur={onBluerEven} type='digit' disabled={disable}/>
           <View className={styles.unit}>{unit}</View>
         </View>
         <View className={styles.plus} onClick={onPlus}>

src/components/search/index.tsx

@@ -1,10 +1,10 @@
-import { Input, View } from '@tarojs/components'
+import { View } from '@tarojs/components'
 import styles from './index.module.scss'
 import CloseBtn from '@/components/closeBtn'
 import classnames from 'classnames'
-import { debounce } from '@/common/util'
+import { forwardRef, memo, ReactNode, useEffect, useImperativeHandle, useState } from 'react'
-import { Children, forwardRef, memo, ReactElement, ReactNode, useEffect, useImperativeHandle, useRef, useState } from 'react'
 import IconFont from '../iconfont/iconfont'
+import InputX from '../InputX/index'
 
 type Params = {
   clickOnSearch?: (val: string) => void
@@ -17,7 +17,6 @@ type Params = {
   showBtn?: boolean
   btnStyle?: Object
   btnTitle?: string
-  debounceTime?: number //防抖时间，不设默认为零
   defaultValue?: string
   children?: ReactNode
   customRightSlot?: ReactNode
@@ -41,7 +40,6 @@ export default memo(
         btnStyle = {},
         placeIcon = 'inner', //搜索图标位置：inner在里面，out在外面
         btnTitle = '搜索', //搜索文字
-        debounceTime = 0, //防抖时间，不设默认为零
         defaultValue = '', //默认值
         children,
         customRightSlot,
@@ -52,18 +50,15 @@ export default memo(
       ref,
     ) => {
       const [inputCon, setInputCon] = useState('')
-      const debounceTimeRef = useRef(0)
       useEffect(() => {
         setInputCon(defaultValue)
       }, [defaultValue])
 
-      useEffect(() => {
-        debounceTimeRef.current = debounceTime
-      }, [debounceTime])
 
       const onInputEven = (e) => {
         const value = e.detail.value
-        changeData(value)
+        setInputCon(value)
+        changeOnSearch?.(value)
       }
 
       useImperativeHandle(ref, () => ({
@@ -75,11 +70,6 @@ export default memo(
         changeOnSearch?.('')
       }
 
-      const changeData = debounce((value) => {
-        setInputCon(value)
-        changeOnSearch?.(value)
-      }, debounceTimeRef.current)
-
       const onSearch = () => {
         clickOnSearch?.(inputCon)
       }
@@ -96,16 +86,17 @@ export default memo(
                   customClassName={classnames(styles.icon_a_sousuo1_self, placeIcon == 'inner' ? styles.icon_inner : styles.icon_out)}></IconFont>
               )}
               <View className={styles.input_bar}>
-                <Input
+                <InputX 
                   cursorSpacing={cursorSpacing as any}
                   adjustPosition={adjustPosition}
                   placeholderStyle='color:#ABABAB; font-size:26rpx'
                   onConfirm={onSearch}
-                  className={classnames(placeIcon == 'out' && styles.input_out)}
                   disabled={disabled}
                   value={inputCon}
                   placeholder={placeholder}
                   onInput={e => onInputEven(e)}
+                  customClassName={classnames(placeIcon == 'out' && styles.input_out)} 
+                  customStyle={{width: '100%'}}
                 />
                 <View className={styles.search_closeBtn}>
                   {!!inputCon && <CloseBtn onClose={() => clearInput()} styleObj={{ width: '20rpx', height: '20rpx', backgroundColor: '#fff', border: '0' }} />}

src/components/searchInput/index.tsx

@@ -1,6 +1,7 @@
-import { Input, View } from '@tarojs/components'
+import { View } from '@tarojs/components'
-import { memo, ReactHTMLElement, ReactNode, useDebugValue, useMemo } from 'react'
+import { memo, ReactNode, useMemo } from 'react'
 import IconFont from '../iconfont/iconfont'
+import InputX from '../InputX'
 import styles from './index.module.scss'
 
 type Params = {
@@ -47,7 +48,7 @@ export default memo((props: Params) => {
       )}
       <View className={styles.searchInput_con}>
         {(!props.children && (
-          <Input disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={e => changeOnInput?.(e.detail.value)} />
+          <InputX disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={e => changeOnInput?.(e.detail.value)} />
         )) || <>{props.children}</>}
       </View>
       {showIcon && <IconFont customClassName={styles.icon_more_self} name='icon-chakanquanbukehu' size={36} color='#333'></IconFont>}

src/pages/accountPage/index.tsx

@@ -24,7 +24,7 @@ export default () => {
     const { fetchData: clitentFetch, state: orderState } = mpcashManagementOrderaccount()
     //数据加载状态
     const statusMore = useMemo(() => {
-        return dataLoadingStatus({ list: clentList.list, total: clentList.total, status: orderState.loading })
+        return dataLoadingStatus({ list: clentList.list, total: clentList.total, status: orderState.loading! })
     }, [clentList, orderState])
 
     const [clientObj, setclientObj] = useState({

src/pages/refundPage/index.tsx

@@ -86,7 +86,7 @@ export default () => {
     }
     //数据加载状态
     const statusMore = useMemo(() => {
-        return dataLoadingStatus({ list: orderData.list, total: orderData.total, status: orderState.loading })
+        return dataLoadingStatus({ list: orderData.list, total: orderData.total, status: orderState.loading! })
     }, [orderData, orderState])
 
     //上拉加载数据
@@ -314,7 +314,7 @@ export default () => {
     return (
         <>
             <View style={{ background: '#FFFFFF', paddingLeft: '20rpx', paddingBottom: '20rpx', position: 'sticky', top: '0', zIndex: '99' }}>
-                <Search placeholder='搜索商品/名称/颜色/订单号' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} >
+                <Search placeholder='搜索商品/名称/颜色/订单号' showBtn={false} changeOnSearch={getSearchData} >
                     <View className={styles.flexBox} onClick={() => showSelctPopup()}>
                         <IconFont name='icon-shaixuan' size={35} color={!isDisabled ? '#0D7CFF' : ''} customClassName={styles['activeshaixuan']} />
                         {/* <View className={classnames('iconfont', 'icon-shaixuan', !isDisabled ? styles.icon_shaixuan : styles.activeshaixuan)}></View> */}

src/pages/saleuserPage/index.tsx

@@ -24,7 +24,7 @@ export default () => {
     const { fetchData: clitentFetch, state: orderState } = mpenumsaleUserlist()
     //数据加载状态
     const statusMore = useMemo(() => {
-        return dataLoadingStatus({ list: clentList.list, total: clentList.total, status: orderState.loading })
+        return dataLoadingStatus({ list: clentList.list, total: clentList.total, status: orderState.loading! })
     }, [clentList, orderState])
 
     const [clientObj, setclientObj] = useState({
@@ -120,7 +120,7 @@ export default () => {
         <View className={styles.cussBox}>
             <View className={styles.searchBox}>
                 <View className={styles.two}>
-                    <Search placeholder='请输入业务员名称' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} />
+                    <Search placeholder='请输入业务员名称' showBtn={false} changeOnSearch={getSearchData} />
                 </View>
 
             </View>

src/pages/searchPage/index.tsx

@@ -355,7 +355,7 @@ export default memo(() => {
     return (
         <View className={styles.main}>
             <View className={styles.topBox}>
-                <Search placeholder='请输入搜索布料' defaultValue={defaultvalue} showBtn={false} changeOnSearch={getSearchData} debounceTime={300} >
+                <Search placeholder='请输入搜索布料' defaultValue={defaultvalue} showBtn={false} changeOnSearch={getSearchData} >
                     <View className={styles.cancelFont} onClick={() => back()}>取消</View>
                 </Search>
             </View>

src/pages/shopping/index.tsx

@@ -227,7 +227,7 @@ const ShoppingCartContainer: FC = () => {
   return (
     <View className={classnames('flex-col', styles.shopping)} id='shoppingContainer'>
       <View className={styles['shopping--topBar']} id='topBar'>
-        <Search placeholder='请输入客户名称' showBtn={false} changeOnSearch={getSearchData} debounceTime={300}>
+        <Search placeholder='请输入客户名称' showBtn={false} changeOnSearch={getSearchData}>
           <View className={styles.flexBox} onClick={onStartToManage}>
             {isManageStatus ? (
               <IconText svg iconName='icon-guanlidingdan' text='取消' color='#4581ff' customClass={styles['icon--manage--cancel']} />