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

src/components/BottomCustomer/index.tsx

@@ -1,5 +1,5 @@
-import { View, ScrollView, Image, Input, Button } from '@tarojs/components'
-import { useCallback, useEffect, useMemo, useRef, useState, memo } from 'react'
+import { View, Button } from '@tarojs/components'
+import { memo } from 'react'
 import styles from "./index.module.scss"
 import classnames from "classnames";
 import Taro from '@tarojs/taro'
@@ -33,4 +33,4 @@ export default memo((props: prosObj) => {
             <Button className={classnames(isDisabled ? styles.activeButton : styles.button)} disabled={isDisabled} onClick={() => { handSure?.() }}> 加入购物车</Button >
         </View >
     )
-})
+})

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 { useEffect, useMemo, useRef, useState } from "react"
+import { View } from "@tarojs/components"
 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 { Children, forwardRef, memo, ReactElement, ReactNode, useEffect, useImperativeHandle, useRef, useState } from 'react'
+import { forwardRef, memo, ReactNode, useEffect, useImperativeHandle, 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 { memo, ReactHTMLElement, ReactNode, useDebugValue, useMemo } from 'react'
+import { View } from '@tarojs/components'
+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>}