@mpxjs/webpack-plugin 2.10.3 → 2.10.4-beta.11

package/lib/runtime/components/react/getInnerListeners.ts

@@ -1,17 +1,16 @@
-import { useRef, useMemo, RefObject } from 'react'
-import { hasOwn, collectDataset } from '@mpxjs/utils'
+import { useRef, useMemo } from 'react'
+import { collectDataset } from '@mpxjs/utils'
 import { omit, extendObject, useNavigation } from './utils'
-import eventConfigMap, { TAP_EVENTS } from './event.config'
+import eventConfigMap from './event.config'
 import {
   Props,
-  AdditionalProps,
+  EventConfig,
+  RawConfig,
+  EventType,
   RemoveProps,
-  UseInnerPropsConfig,
   InnerRef,
-  SetTimeoutReturnType,
   LayoutRef,
-  NativeTouchEvent,
-  Navigation
+  ExtendedNativeTouchEvent
 } from './types/getInnerListeners'
 
 const globalEventState = {
@@ -20,22 +19,21 @@ const globalEventState = {
 
 const getTouchEvent = (
   type: string,
-  event: NativeTouchEvent,
-  props: Props,
-  config: UseInnerPropsConfig,
-  navigation: Navigation
+  event: ExtendedNativeTouchEvent,
+  config: EventConfig
 ) => {
+  const { navigation, propsRef, layoutRef } = config
+  const props = propsRef.current
   const { y: navigationY = 0 } = navigation?.layout || {}
   const nativeEvent = event.nativeEvent
   const { timestamp, pageX, pageY, touches, changedTouches } = nativeEvent
   const { id } = props
-  const { layoutRef } = config
 
   const currentTarget = extendObject({}, event.currentTarget, {
     id: id || '',
     dataset: collectDataset(props),
-    offsetLeft: layoutRef?.current?.offsetLeft || 0,
-    offsetTop: layoutRef?.current?.offsetTop || 0
+    offsetLeft: layoutRef.current?.offsetLeft || 0,
+    offsetTop: layoutRef.current?.offsetTop || 0
   })
 
   const pendingProps = (event as any)._targetInst?.pendingProps || {}
@@ -108,183 +106,129 @@ export const getCustomEvent = (
 }
 
 function handleEmitEvent (
-  events: string[],
-  type: string,
-  oe: NativeTouchEvent,
-  propsRef: Record<string, any>,
-  config: UseInnerPropsConfig,
-  navigation: Navigation
+  name: string,
+  e: ExtendedNativeTouchEvent,
+  type: EventType,
+  eventConfig: EventConfig
 ) {
-  events.forEach((event) => {
-    if (propsRef.current[event]) {
-      const match = /^(catch|capture-catch):?(.*?)(?:\.(.*))?$/.exec(event)
-      if (match) {
-        oe.stopPropagation()
-      }
-      propsRef.current[event](
-        getTouchEvent(type, oe, propsRef.current, config, navigation)
-      )
+  const { propsRef } = eventConfig
+  const eventCfg = eventConfig[name]
+  if (eventCfg) {
+    if (eventCfg.hasCatch && name !== 'tap' && name !== 'longpress') {
+      e.stopPropagation()
     }
-  })
+    eventCfg[type].forEach((event) => {
+      propsRef.current[event]?.(getTouchEvent(name, e, eventConfig))
+    })
+  }
 }
 
-function checkIsNeedPress (e: NativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>) {
-  const tapDetailInfo = ref.current!.mpxPressInfo.detail || { x: 0, y: 0 }
-  const nativeEvent = e.nativeEvent
-  const currentPageX = nativeEvent.changedTouches[0].pageX
-  const currentPageY = nativeEvent.changedTouches[0].pageY
+function checkIsNeedPress (e: ExtendedNativeTouchEvent, type: 'bubble' | 'capture', ref: InnerRef) {
+  const tapDetailInfo = ref.current.mpxPressInfo.detail || { x: 0, y: 0 }
+  const currentPageX = e.nativeEvent.changedTouches[0].pageX
+  const currentPageY = e.nativeEvent.changedTouches[0].pageY
   if (
     Math.abs(currentPageX - tapDetailInfo.x) > 3 ||
-        Math.abs(currentPageY - tapDetailInfo.y) > 3
+    Math.abs(currentPageY - tapDetailInfo.y) > 3
   ) {
     globalEventState.needPress = false
-    ref.current!.startTimer[type] &&
-          clearTimeout(ref.current!.startTimer[type] as SetTimeoutReturnType)
-    ref.current!.startTimer[type] = null
+    ref.current.startTimer[type] && clearTimeout(ref.current.startTimer[type] as unknown as number)
+    ref.current.startTimer[type] = null
   }
 }
 
-function handleTouchstart (e: NativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig, navigation: Navigation) {
+function handleTouchstart (e: ExtendedNativeTouchEvent, type: EventType, eventConfig: EventConfig) {
+  // 阻止事件被释放放回对象池，导致对象复用 _stoppedEventTypes 状态被保留
   e.persist()
-  const bubbleTouchEvent = ['catchtouchstart', 'bindtouchstart']
-  const bubblePressEvent = ['catchlongpress', 'bindlongpress']
-  const captureTouchEvent = [
-    'capture-catchtouchstart',
-    'capture-bindtouchstart'
-  ]
-  const capturePressEvent = [
-    'capture-catchlongpress',
-    'capture-bindlongpress'
-  ]
-  ref.current!.startTimer[type] = null
+  const { innerRef } = eventConfig
   globalEventState.needPress = true
-  const nativeEvent = e.nativeEvent
-  ref.current!.mpxPressInfo.detail = {
-    x: nativeEvent.changedTouches[0].pageX,
-    y: nativeEvent.changedTouches[0].pageY
+  innerRef.current.mpxPressInfo.detail = {
+    x: e.nativeEvent.changedTouches[0].pageX,
+    y: e.nativeEvent.changedTouches[0].pageY
   }
-  const currentTouchEvent =
-        type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
-  const currentPressEvent =
-        type === 'bubble' ? bubblePressEvent : capturePressEvent
-  handleEmitEvent(currentTouchEvent, 'touchstart', e, propsRef, config, navigation)
-  const {
-    catchlongpress,
-    bindlongpress,
-    'capture-catchlongpress': captureCatchlongpress,
-    'capture-bindlongpress': captureBindlongpress
-  } = propsRef.current
-  if (
-    catchlongpress ||
-        bindlongpress ||
-        captureCatchlongpress ||
-        captureBindlongpress
-  ) {
-    ref.current!.startTimer[type] = setTimeout(() => {
+
+  handleEmitEvent('touchstart', e, type, eventConfig)
+
+  if (eventConfig.longpress) {
+    if (e._stoppedEventTypes?.has('longpress')) {
+      return
+    }
+    if (eventConfig.longpress.hasCatch) {
+      e._stoppedEventTypes = e._stoppedEventTypes || new Set()
+      e._stoppedEventTypes.add('longpress')
+    }
+    innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type] as unknown as number)
+    innerRef.current.startTimer[type] = setTimeout(() => {
       // 只要触发过longpress, 全局就不再触发tap
       globalEventState.needPress = false
-      handleEmitEvent(currentPressEvent, 'longpress', e, propsRef, config, navigation)
+      handleEmitEvent('longpress', e, type, eventConfig)
     }, 350)
   }
 }
 
-function handleTouchmove (e: NativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig, navigation: Navigation) {
-  const bubbleTouchEvent = ['catchtouchmove', 'bindtouchmove']
-  const captureTouchEvent = [
-    'capture-catchtouchmove',
-    'capture-bindtouchmove'
-  ]
-  const currentTouchEvent =
-        type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
-  handleEmitEvent(currentTouchEvent, 'touchmove', e, propsRef, config, navigation)
-  if (TAP_EVENTS.some(eventName => propsRef.current[eventName])) {
-    checkIsNeedPress(e, type, ref)
+function handleTouchmove (e: ExtendedNativeTouchEvent, type: EventType, eventConfig: EventConfig) {
+  const { innerRef } = eventConfig
+  handleEmitEvent('touchmove', e, type, eventConfig)
+  if (eventConfig.tap) {
+    checkIsNeedPress(e, type, innerRef)
   }
 }
 
-function handleTouchend (e: NativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig, navigation: Navigation) {
-  // move event may not be triggered
-  if (TAP_EVENTS.some(eventName => propsRef.current[eventName])) {
-    checkIsNeedPress(e, type, ref)
-  }
-  const bubbleTouchEvent = ['catchtouchend', 'bindtouchend']
-  const bubbleTapEvent = ['catchtap', 'bindtap']
-  const captureTouchEvent = [
-    'capture-catchtouchend',
-    'capture-bindtouchend'
-  ]
-  const captureTapEvent = ['capture-catchtap', 'capture-bindtap']
-  const currentTouchEvent =
-        type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
-  const currentTapEvent =
-        type === 'bubble' ? bubbleTapEvent : captureTapEvent
-  ref.current!.startTimer[type] &&
-        clearTimeout(ref.current!.startTimer[type] as SetTimeoutReturnType)
-  ref.current!.startTimer[type] = null
-  handleEmitEvent(currentTouchEvent, 'touchend', e, propsRef, config, navigation)
-  if (globalEventState.needPress) {
-    if (type === 'bubble' && config.disableTap) {
+function handleTouchend (e: ExtendedNativeTouchEvent, type: EventType, eventConfig: EventConfig) {
+  const { innerRef, disableTap } = eventConfig
+  handleEmitEvent('touchend', e, type, eventConfig)
+  innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type] as unknown as number)
+  if (eventConfig.tap) {
+    checkIsNeedPress(e, type, innerRef)
+    if (!globalEventState.needPress || (type === 'bubble' && disableTap) || e._stoppedEventTypes?.has('tap')) {
       return
     }
-    handleEmitEvent(currentTapEvent, 'tap', e, propsRef, config, navigation)
+    if (eventConfig.tap.hasCatch) {
+      e._stoppedEventTypes = e._stoppedEventTypes || new Set()
+      e._stoppedEventTypes.add('tap')
+    }
+    handleEmitEvent('tap', e, type, eventConfig)
   }
 }
 
-function handleTouchcancel (
-  e: NativeTouchEvent,
-  type: 'bubble' | 'capture',
-  ref: RefObject<InnerRef>,
-  propsRef: Record<string, any>,
-  config: UseInnerPropsConfig,
-  navigation: Navigation
-) {
-  const bubbleTouchEvent = ['catchtouchcancel', 'bindtouchcancel']
-  const captureTouchEvent = [
-    'capture-catchtouchcancel',
-    'capture-bindtouchcancel'
-  ]
-  const currentTouchEvent =
-        type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
-  ref.current!.startTimer[type] &&
-        clearTimeout(ref.current!.startTimer[type] as SetTimeoutReturnType)
-  ref.current!.startTimer[type] = null
-  handleEmitEvent(currentTouchEvent, 'touchcancel', e, propsRef, config, navigation)
+function handleTouchcancel (e: ExtendedNativeTouchEvent, type: EventType, eventConfig: EventConfig) {
+  const { innerRef } = eventConfig
+  handleEmitEvent('touchcancel', e, type, eventConfig)
+  innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type] as unknown as number)
 }
 
-function createTouchEventHandler (eventName: 'onTouchStart'|'onTouchMove'|'onTouchEnd'|'onTouchCancel', type: 'bubble' | 'capture') {
-  return (e: NativeTouchEvent, ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig, navigation: Navigation) => {
-    const handlerMap = {
+function createTouchEventHandler (eventName: string, eventConfig: EventConfig) {
+  return (e: ExtendedNativeTouchEvent) => {
+    const bubbleHandlerMap: Record<string, any> = {
       onTouchStart: handleTouchstart,
       onTouchMove: handleTouchmove,
       onTouchEnd: handleTouchend,
       onTouchCancel: handleTouchcancel
     }
 
-    const handler = handlerMap[eventName]
-    if (handler) {
-      handler(e, type, ref, propsRef, config, navigation)
+    const captureHandlerMap: Record<string, any> = {
+      onTouchStartCapture: handleTouchstart,
+      onTouchMoveCapture: handleTouchmove,
+      onTouchEndCapture: handleTouchend,
+      onTouchCancelCapture: handleTouchcancel
+    }
+
+    if (bubbleHandlerMap[eventName]) {
+      bubbleHandlerMap[eventName](e, 'bubble', eventConfig)
+    }
+
+    if (captureHandlerMap[eventName]) {
+      captureHandlerMap[eventName](e, 'capture', eventConfig)
     }
   }
 }
 
-const touchEventList = [
-  { eventName: 'onTouchStart', handler: createTouchEventHandler('onTouchStart', 'bubble') },
-  { eventName: 'onTouchMove', handler: createTouchEventHandler('onTouchMove', 'bubble') },
-  { eventName: 'onTouchEnd', handler: createTouchEventHandler('onTouchEnd', 'bubble') },
-  { eventName: 'onTouchCancel', handler: createTouchEventHandler('onTouchCancel', 'bubble') },
-  { eventName: 'onTouchStartCapture', handler: createTouchEventHandler('onTouchStart', 'capture') },
-  { eventName: 'onTouchMoveCapture', handler: createTouchEventHandler('onTouchMove', 'capture') },
-  { eventName: 'onTouchEndCapture', handler: createTouchEventHandler('onTouchEnd', 'capture') },
-  { eventName: 'onTouchCancelCapture', handler: createTouchEventHandler('onTouchCancel', 'capture') }
-]
-
 const useInnerProps = (
   props: Props = {},
-  additionalProps: AdditionalProps = {},
   userRemoveProps: RemoveProps = [],
-  rawConfig?: UseInnerPropsConfig
+  rawConfig?: RawConfig
 ) => {
-  const ref = useRef<InnerRef>({
+  const innerRef: InnerRef = useRef({
     startTimer: {
       bubble: null,
       capture: null
@@ -296,67 +240,80 @@ const useInnerProps = (
       }
     }
   })
-
-  const propsRef = useRef<Record<string, any>>({})
-  const eventConfig: { [key: string]: string[] } = {}
-  const config = rawConfig || {
-    layoutRef: { current: {} },
-    disableTap: false
-  }
+  const propsRef = useRef({})
+  propsRef.current = props
   const navigation = useNavigation()
-
-  const removeProps = [
-    'children',
-    'enable-background',
-    'enable-offset',
-    'enable-var',
-    'external-var-context',
-    'parent-font-size',
-    'parent-width',
-    'parent-height',
-    ...userRemoveProps
-  ]
-
-  propsRef.current = extendObject({}, props, additionalProps)
+  const eventConfig: EventConfig = extendObject({
+    layoutRef: {
+      current: null
+    },
+    propsRef,
+    innerRef,
+    disableTap: false,
+    navigation
+  }, rawConfig)
 
   let hashEventKey = ''
   const rawEventKeys: Array<string> = []
-
-  for (const key in eventConfigMap) {
-    if (hasOwn(propsRef.current, key)) {
-      eventConfig[key] = eventConfigMap[key].events
-      hashEventKey = hashEventKey + eventConfigMap[key].bitFlag
+  const transformedEventSet = new Set<string>()
+  Object.keys(props).forEach((key) => {
+    if (eventConfigMap[key]) {
+      hashEventKey += eventConfigMap[key].bitFlag
       rawEventKeys.push(key)
+      eventConfigMap[key].events.forEach((event) => {
+        transformedEventSet.add(event)
+      })
+      const match = /^(bind|catch|capture-bind|capture-catch)(.*)$/.exec(key)!
+      const prefix = match[1]
+      const eventName = match[2]
+      eventConfig[eventName] = eventConfig[eventName] || {
+        bubble: [],
+        capture: [],
+        hasCatch: false
+      }
+      if (prefix === 'bind' || prefix === 'catch') {
+        eventConfig[eventName].bubble.push(key)
+      } else {
+        eventConfig[eventName].capture.push(key)
+      }
+
+      if (prefix === 'catch' || prefix === 'capture-catch') {
+        eventConfig[eventName].hasCatch = true
+      }
     }
-  }
+  })
 
   const events = useMemo(() => {
-    if (!rawEventKeys.length) {
+    if (!hashEventKey) {
       return {}
     }
-    const transformedEventKeys = rawEventKeys.reduce((acc: string[], key) => {
-      if (propsRef.current[key]) {
-        return acc.concat(eventConfig[key])
-      }
-      return acc
-    }, [])
-    const finalEventKeys = [...new Set(transformedEventKeys)]
-    const events: Record<string, (e: NativeTouchEvent) => void> = {}
 
-    touchEventList.forEach((item) => {
-      if (finalEventKeys.includes(item.eventName)) {
-        events[item.eventName] = (e: NativeTouchEvent) =>
-          item.handler(e, ref, propsRef, config, navigation)
-      }
-    })
+    const events: Record<string, (e: ExtendedNativeTouchEvent) => void> = {}
+
+    for (const eventName of transformedEventSet) {
+      events[eventName] = createTouchEventHandler(eventName, eventConfig)
+    }
 
     return events
   }, [hashEventKey])
 
+  const removeProps = [
+    'children',
+    'enable-background',
+    'enable-offset',
+    'enable-var',
+    'external-var-context',
+    'parent-font-size',
+    'parent-width',
+    'parent-height',
+    ...userRemoveProps,
+    ...rawEventKeys
+  ]
+
   return extendObject(
     {},
     events,
-    omit(propsRef.current, [...rawEventKeys, ...removeProps])
+    omit(props, removeProps)
   )
 }
 export default useInnerProps

package/lib/runtime/components/react/mpx-button.tsx

@@ -42,7 +42,8 @@ import {
   TextStyle,
   Animated,
   Easing,
-  NativeSyntheticEvent
+  NativeSyntheticEvent,
+  useAnimatedValue
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
 import { GestureDetector, PanGesture } from 'react-native-gesture-handler'
@@ -156,7 +157,7 @@ const timer = (data: any, time = 3000) => new Promise((resolve) => {
 })
 
 const Loading = ({ alone = false }: { alone: boolean }): JSX.Element => {
-  const image = useRef(new Animated.Value(0)).current
+  const image = useAnimatedValue(0)
 
   const rotate = image.interpolate({
     inputRange: [0, 1],
@@ -371,14 +372,13 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
   }
 
   const innerProps = useInnerProps(
-    props,
     extendObject(
-      {
-        ref: nodeRef,
-        style: extendObject({}, innerStyle, layoutStyle)
-      },
+      {},
+      props,
       layoutProps,
       {
+        ref: nodeRef,
+        style: extendObject({}, innerStyle, layoutStyle),
         bindtap: !disabled && onTap
       }
     ),

package/lib/runtime/components/react/mpx-canvas/index.tsx

@@ -48,19 +48,19 @@ const stylesheet = StyleSheet.create({
 })
 
 interface CanvasProps {
-  style?: Record<string, any>;
-  originWhitelist?: Array<string>;
+  style?: Record<string, any>
+  originWhitelist?: Array<string>
   'enable-var'?: boolean
   'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
   'external-var-context'?: Record<string, any>
-  bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  bindtouchend?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  bindtouchcancel?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  bindlongtap?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  binderror?: (event: NativeSyntheticEvent<ErrorEvent>) => void;
+  bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent>) => void
+  bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void
+  bindtouchend?: (event: NativeSyntheticEvent<TouchEvent>) => void
+  bindtouchcancel?: (event: NativeSyntheticEvent<TouchEvent>) => void
+  bindlongtap?: (event: NativeSyntheticEvent<TouchEvent>) => void
+  binderror?: (event: NativeSyntheticEvent<ErrorEvent>) => void
 }
 
 const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasProps>((props: CanvasProps = {}, ref): JSX.Element => {
@@ -91,13 +91,21 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
   const { register } = useConstructorsRegistry()
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
-  const innerProps = useInnerProps(props, {
-    ref: nodeRef,
-    style: extendObject({}, normalStyle, layoutStyle, { opacity: isLoaded ? 1 : 0 }),
-    ...layoutProps
-  }, [], {
-    layoutRef
-  })
+  const innerProps = useInnerProps(
+    extendObject(
+      {},
+      props,
+      layoutProps,
+      {
+        ref: nodeRef,
+        style: extendObject({}, normalStyle, layoutStyle, { opacity: isLoaded ? 1 : 0 })
+      }
+    ),
+    [],
+    {
+      layoutRef
+    }
+  )
 
   const context2D = new CanvasRenderingContext2D(canvasRef.current) as any
 
@@ -251,8 +259,8 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
     context: context2D
   })
 
-  if (Platform.OS === 'android') {
-    const isAndroid9 = Platform.Version >= 28
+  if (__mpx_mode__ !== 'ios') {
+    const isAndroid9 = Platform.Version as number >= 28
     return createElement(View, innerProps, createElement(
       WebView,
       {

package/lib/runtime/components/react/mpx-checkbox-group.tsx

@@ -116,13 +116,14 @@ const CheckboxGroup = forwardRef<
   }, [])
 
   const innerProps = useInnerProps(
-    props,
     extendObject(
+      {},
+      props,
+      layoutProps,
       {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle)
-      },
-      layoutProps
+      }
     ),
     [
       'name'

package/lib/runtime/components/react/mpx-checkbox.tsx

@@ -42,9 +42,9 @@ export interface CheckboxProps extends Selection {
   'enable-offset'?: boolean
   'enable-var'?: boolean
   'external-var-context'?: Record<string, any>
-  'parent-font-size'?: number;
-  'parent-width'?: number;
-  'parent-height'?: number;
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
   children?: ReactNode
   bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
   _onChange?: (evt: NativeSyntheticEvent<TouchEvent> | unknown, { checked }: { checked: boolean }) => void
@@ -99,7 +99,7 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
     const [isChecked, setIsChecked] = useState<boolean>(!!checked)
 
     const groupContext = useContext(CheckboxGroupContext)
-    let groupValue: { [key: string]: { checked: boolean; setValue: Dispatch<SetStateAction<boolean>>; } } | undefined
+    let groupValue: { [key: string]: { checked: boolean; setValue: Dispatch<SetStateAction<boolean>> } } | undefined
     let notifyChange: (evt: NativeSyntheticEvent<TouchEvent>) => void | undefined
 
     const defaultStyle = extendObject(
@@ -163,14 +163,13 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
     }
 
     const innerProps = useInnerProps(
-      props,
       extendObject(
-        {
-          ref: nodeRef,
-          style: extendObject({}, innerStyle, layoutStyle)
-        },
+        {},
+        props,
         layoutProps,
         {
+          ref: nodeRef,
+          style: extendObject({}, innerStyle, layoutStyle),
           bindtap: !disabled && onTap
         }
       ),

package/lib/runtime/components/react/mpx-form.tsx

@@ -11,20 +11,20 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import { FormContext } from './context'
 import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren, extendObject } from './utils'
 interface FormProps {
-  style?: Record<string, any>;
-  children?: ReactNode;
-  'enable-offset'?: boolean;
+  style?: Record<string, any>
+  children?: ReactNode
+  'enable-offset'?: boolean
   'enable-var'?: boolean
-  'external-var-context'?: Record<string, any>;
-  'parent-font-size'?: number;
-  'parent-width'?: number;
-  'parent-height'?: number;
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
   bindsubmit?: (evt: {
     detail: {
-      value: any;
-    };
-  }) => void;
-  bindreset?: () => void;
+      value: any
+    }
+  }) => void
+  bindreset?: () => void
 }
 
 const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: FormProps, ref): JSX.Element => {
@@ -59,14 +59,20 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef })
 
-  const innerProps = useInnerProps(props, extendObject({
-    style: extendObject({}, innerStyle, layoutStyle),
-    ref: formRef
-  }, layoutProps)
-  , [
-    'bindsubmit',
-    'bindreset'
-  ], { layoutRef })
+  const innerProps = useInnerProps(
+    extendObject(
+      {},
+      props,
+      layoutProps,
+      {
+        style: extendObject({}, innerStyle, layoutStyle),
+        ref: formRef
+      }
+    )
+    , [
+      'bindsubmit',
+      'bindreset'
+    ], { layoutRef })
 
   const contextValue = useMemo(() => {
     const formValuesMap = new Map()