diff --git a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts index be6b90379e..a459c11de0 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts +++ b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts @@ -1,3 +1,4 @@ +import { NativeSyntheticEvent } from 'react-native' import { useRef, useMemo } from 'react' import { collectDataset } from '@mpxjs/utils' import { extendObject, useNavigation } from './utils' @@ -21,6 +22,18 @@ const globalEventState: GlobalEventState = { identifier: null } +type LabelControlEvent = NativeSyntheticEvent + +export const markLabelControlHandled = (evt: LabelControlEvent) => { + evt.nativeEvent._labelControlHandled = true +} + +export const isLabelControlHandled = (evt: LabelControlEvent) => { + return !!evt.nativeEvent._labelControlHandled +} + const baseRemovePropsMap: Record = { children: true, 'enable-background': true, diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx index f4a2e9276b..833588d78b 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx @@ -23,7 +23,7 @@ import { NativeSyntheticEvent } from 'react-native' import { warn } from '@mpxjs/utils' -import useInnerProps, { getCustomEvent } from './getInnerListeners' +import useInnerProps, { getCustomEvent, markLabelControlHandled } from './getInnerListeners' import useNodesRef, { HandlerRef } from './useNodesRef' import Icon from './mpx-icon' import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useTextPassThrough } from './utils' @@ -120,6 +120,7 @@ const Checkbox = forwardRef, CheckboxProps>( } const onTap = (evt: NativeSyntheticEvent) => { + markLabelControlHandled(evt) bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props)) onChange(evt) } diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx index 6fae8b260b..3a119f9816 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx @@ -4,7 +4,7 @@ import { JSX, useRef, forwardRef, ReactNode, useCallback, createElement } from 'react' import { View, ViewStyle, NativeSyntheticEvent } from 'react-native' import { noop, warn } from '@mpxjs/utils' -import useInnerProps, { getCustomEvent } from './getInnerListeners' +import useInnerProps, { getCustomEvent, isLabelControlHandled } from './getInnerListeners' import useNodesRef, { HandlerRef } from './useNodesRef' import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useTextPassThrough } from './utils' import { LabelContext, LabelContextValue } from './context' @@ -70,7 +70,9 @@ const Label = forwardRef, LabelProps>( const onTap = useCallback((evt: NativeSyntheticEvent) => { const { bindtap } = propsRef.current bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, { props: propsRef.current })) - contextRef.current.triggerChange(evt) + if (!isLabelControlHandled(evt)) { + contextRef.current.triggerChange(evt) + } }, []) const innerProps = useInnerProps( diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx index 672630851d..a86728b883 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx @@ -8,7 +8,7 @@ import { JSX, useRef, useState, forwardRef, useEffect, ReactNode, useContext, Di import { View, StyleSheet, ViewStyle, NativeSyntheticEvent } from 'react-native' import { warn } from '@mpxjs/utils' import { LabelContext, RadioGroupContext } from './context' -import useInnerProps, { getCustomEvent } from './getInnerListeners' +import useInnerProps, { getCustomEvent, markLabelControlHandled } from './getInnerListeners' import useNodesRef, { HandlerRef } from './useNodesRef' import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useTextPassThrough } from './utils' import Icon from './mpx-icon' @@ -109,6 +109,7 @@ const Radio = forwardRef, RadioProps>( } const onTap = (evt: NativeSyntheticEvent) => { + markLabelControlHandled(evt) bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props)) onChange(evt) }