Merge pull request #833 from thundersdata-frontend/rn-issue

fix: 修复几个组件的bug

Author: chj-damon

.changeset/dry-falcons-pay.md

@@ -0,0 +1,5 @@
+---
+'@td-design/react-native': patch
+---
+
+fix: 修复几个组件的bug

packages/react-native/src/button-group/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useEffect } from 'react';
 import { Keyboard, StyleProp, ViewStyle } from 'react-native';
 
 import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
@@ -36,6 +36,10 @@ const ButtonGroup: FC<ButtonGroupProps> = ({
 }) => {
   const [active, setActive] = useSafeState(activeIndex);
 
+  useEffect(() => {
+    setActive(activeIndex);
+  }, [activeIndex]);
+
   if (options.length === 0) return null;
 
   const handlePress = useMemoizedFn(index => {

packages/react-native/src/number-keyboard/useNumberKeyboardModal.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { useBoolean, useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
 
@@ -11,14 +11,21 @@ export default function useNumberKeyboardModal({
   onSubmit,
 }: Pick<NumberKeyboardModalProps, 'value' | 'onPress' | 'onDelete' | 'onSubmit'>) {
   const [text, setText] = useSafeState(value);
-  const [visible, { setFalse }] = useBoolean(true);
+  const [visible, visibleAction] = useBoolean(true);
+  const isFirstPress = useRef(true);
 
   useEffect(() => {
     setText(value);
   }, [value]);
 
+  /** 点击数字，第一次点击的时候，需要把之前的清掉 */
   const handleChange = (key: string) => {
-    setText(text => text + key);
+    if (isFirstPress.current) {
+      setText(key);
+      isFirstPress.current = false;
+    } else {
+      setText(text => text + key);
+    }
     onPress?.(key);
   };
 
@@ -29,13 +36,13 @@ export default function useNumberKeyboardModal({
 
   const handleSubmit = () => {
     onSubmit?.(text);
-    setFalse();
+    visibleAction.setFalse();
   };
 
   return {
     text,
     visible,
-    setFalse,
+    setFalse: visibleAction.setFalse,
     handleChange: useMemoizedFn(handleChange),
     handleSubmit: useMemoizedFn(handleSubmit),
     handleDelete: useMemoizedFn(handleDelete),

packages/react-native/src/vehicle-keyboard/useVehicleKeyboardModal.ts

@@ -1,6 +1,6 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
-import { useBoolean, useLatest, useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
+import { useBoolean, useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
 
 import { VehicleKeyboardModalProps, VehicleKeyboardType } from './type';
 
@@ -10,12 +10,9 @@ export default function useVehicleKeyboardModal({
   onDelete,
   onSubmit,
 }: Pick<VehicleKeyboardModalProps, 'value' | 'onPress' | 'onDelete' | 'onSubmit'>) {
-  const onPressRef = useLatest(onPress);
-  const onDeleteRef = useLatest(onDelete);
-  const onSubmitRef = useLatest(onSubmit);
-
   const [text, setText] = useSafeState(value);
-  const [visible, { setFalse }] = useBoolean(true);
+  const [visible, visibleAction] = useBoolean(true);
+  const isFirstPress = useRef(true);
 
   const type = text.length === 0 ? 'provinces' : ('vehicleNum' as VehicleKeyboardType);
   const textArr = text.split('');
@@ -28,26 +25,31 @@ export default function useVehicleKeyboardModal({
     if (text.length > 8) {
       return;
     }
-    setText(text => text + key);
-    onPressRef.current?.(key);
+    if (isFirstPress.current) {
+      setText(key);
+      isFirstPress.current = false;
+    } else {
+      setText(text => text + key);
+    }
+    onPress?.(key);
   };
 
   const handleDelete = () => {
     setText(text => (text.length > 0 ? text.slice(0, text.length - 1) : ''));
-    onDeleteRef.current?.();
+    onDelete?.();
   };
 
   const handleSubmit = () => {
-    onSubmitRef.current?.(text);
-    setFalse();
+    onSubmit?.(text);
+    visibleAction.setFalse();
   };
 
   return {
     text,
     type,
     textArr,
     visible,
-    setFalse,
+    setFalse: visibleAction.setFalse,
     handleChange: useMemoizedFn(handleChange),
     handleSubmit: useMemoizedFn(handleSubmit),
     handleDelete: useMemoizedFn(handleDelete),