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

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' }} />}