From 425eb9e3aecdf237136728aca824d17fcdc7efa3 Mon Sep 17 00:00:00 2001 From: xuan Date: Wed, 23 Nov 2022 19:35:32 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=88=20perf(InputX=E7=BB=84=E4=BB=B6):?= =?UTF-8?q?=20=E4=BF=AE=E5=A4=8Dinput=20=E7=BB=84=E4=BB=B6=E8=BE=93?= =?UTF-8?q?=E5=85=A5=E8=BF=87=E5=BF=AB=E4=BC=9A=E5=87=BA=E7=8E=B0=E9=97=AA?= =?UTF-8?q?=E7=83=81=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- project.private.config.json | 7 +++++++ src/components/BottomCustomer/index.tsx | 6 +++--- src/components/InputX/index.tsx | 24 ++++++++++++++++++++++++ src/components/counter/index.tsx | 7 ++++--- src/components/search/index.tsx | 25 ++++++++----------------- src/components/searchInput/index.tsx | 7 ++++--- src/pages/accountPage/index.tsx | 4 ++-- src/pages/refundPage/index.tsx | 4 ++-- src/pages/saleuserPage/index.tsx | 6 +++--- src/pages/searchPage/index.tsx | 2 +- src/pages/shopping/index.tsx | 2 +- 11 files changed, 59 insertions(+), 35 deletions(-) create mode 100644 src/components/InputX/index.tsx diff --git a/project.private.config.json b/project.private.config.json index 7935f02..d1711c9 100644 --- a/project.private.config.json +++ b/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 } ] } diff --git a/src/components/BottomCustomer/index.tsx b/src/components/BottomCustomer/index.tsx index 7fe09ae..63babe3 100644 --- a/src/components/BottomCustomer/index.tsx +++ b/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) => { ) -}) \ No newline at end of file +}) diff --git a/src/components/InputX/index.tsx b/src/components/InputX/index.tsx new file mode 100644 index 0000000..481d8d1 --- /dev/null +++ b/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 = (props) => { + const {customClassName, customStyle,customInputStyle, customInputClassName,...inputProps} = props + console.log('props', props); + return ( + + + + + + ) +} + +export default InputX diff --git a/src/components/counter/index.tsx b/src/components/counter/index.tsx index 5a7cc74..6e83542 100644 --- a/src/components/counter/index.tsx +++ b/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, - - + {unit} diff --git a/src/components/search/index.tsx b/src/components/search/index.tsx index e9885d2..58d2409 100644 --- a/src/components/search/index.tsx +++ b/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)}> )} - onInputEven(e)} + customClassName={classnames(placeIcon == 'out' && styles.input_out)} + customStyle={{width: '100%'}} /> {!!inputCon && clearInput()} styleObj={{ width: '20rpx', height: '20rpx', backgroundColor: '#fff', border: '0' }} />} diff --git a/src/components/searchInput/index.tsx b/src/components/searchInput/index.tsx index 209642a..e83ace6 100644 --- a/src/components/searchInput/index.tsx +++ b/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) => { )} {(!props.children && ( - clickOnInput?.()} onInput={e => changeOnInput?.(e.detail.value)} /> + clickOnInput?.()} onInput={e => changeOnInput?.(e.detail.value)} /> )) || <>{props.children}} {showIcon && } diff --git a/src/pages/accountPage/index.tsx b/src/pages/accountPage/index.tsx index 3404172..359f551 100644 --- a/src/pages/accountPage/index.tsx +++ b/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({ @@ -149,4 +149,4 @@ export default () => { ) -} \ No newline at end of file +} diff --git a/src/pages/refundPage/index.tsx b/src/pages/refundPage/index.tsx index 76a5681..97c7e25 100644 --- a/src/pages/refundPage/index.tsx +++ b/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 ( <> - + showSelctPopup()}> {/* */} diff --git a/src/pages/saleuserPage/index.tsx b/src/pages/saleuserPage/index.tsx index a78954c..138b9b9 100644 --- a/src/pages/saleuserPage/index.tsx +++ b/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 () => { - + @@ -148,4 +148,4 @@ export default () => { ) -} \ No newline at end of file +} diff --git a/src/pages/searchPage/index.tsx b/src/pages/searchPage/index.tsx index 8a87083..0009528 100644 --- a/src/pages/searchPage/index.tsx +++ b/src/pages/searchPage/index.tsx @@ -355,7 +355,7 @@ export default memo(() => { return ( - + back()}>取消 diff --git a/src/pages/shopping/index.tsx b/src/pages/shopping/index.tsx index c45f4fc..216a81a 100644 --- a/src/pages/shopping/index.tsx +++ b/src/pages/shopping/index.tsx @@ -227,7 +227,7 @@ const ShoppingCartContainer: FC = () => { return ( - + {isManageStatus ? (