Taro 3.6.26 View 初始绑定 onClick 为 undefined，点击报错

[shushu2013]

Taro 环境

👽 Taro v3.6.26

  Taro CLI 3.6.26 environment info:
    System:
      OS: macOS 12.1
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 16.20.0 - ~/.nvm/versions/node/v16.20.0/bin/node
      Yarn: 1.22.19 - ~/.nvm/versions/node/v16.20.0/bin/yarn
      npm: 8.19.4 - ~/.nvm/versions/node/v16.20.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.26 => 3.6.26 
      @tarojs/components: 3.6.26 => 3.6.26 
      @tarojs/helper: 3.6.26 => 3.6.26 
      @tarojs/mini-runner: 3.6.26 => 3.6.26 
      @tarojs/plugin-framework-react: 3.6.26 => 3.6.26 
      @tarojs/plugin-html: 3.6.26 => 3.6.26 
      @tarojs/plugin-platform-alipay: 3.6.26 => 3.6.26 
      @tarojs/plugin-platform-h5: 3.6.26 => 3.6.26 
      @tarojs/plugin-platform-jd: 3.6.26 => 3.6.26 
      @tarojs/plugin-platform-qq: 3.6.26 => 3.6.26 
      @tarojs/plugin-platform-swan: 3.6.26 => 3.6.26 
      @tarojs/plugin-platform-tt: 3.6.26 => 3.6.26 
      @tarojs/plugin-platform-weapp: 3.6.26 => 3.6.26 
      @tarojs/react: 3.6.26 => 3.6.26 
      @tarojs/runtime: 3.6.26 => 3.6.26 
      @tarojs/shared: 3.6.26 => 3.6.26 
      @tarojs/taro: 3.6.26 => 3.6.26 
      @tarojs/webpack-runner: 3.6.26 => 3.6.26 
      babel-preset-taro: 3.6.26 => 3.6.26 
      eslint-config-taro: 3.6.26 => 3.6.26 
      react: ^18.0.0 => 18.0.0 
    npmGlobalPackages:
      typescript: 5.0.4

复现步骤

import React from 'react'
import { View } from '@tarojs/components'
import './index.styl'

function Index() {

  const [count, setCount] = React.useState(0)

  return (
    <View className="nutui-react-demo">
      <View
        className="custom-btn"
        onClick={count >= 0 ? undefined : () => {
          setCount(count + 1)
        }}
      >
        {count}
      </View>
    </View>
  )
}

export default Index

View 初始绑定 onClick 为 undefined，点击报错

报错原因

代码中，未判断 newEventHandler 不存在的情况，绑定报错

    const listener: EventCenter.EventCallback = eventStore[eventName] = function (e: Event) {
      // React batch event updates
      unstable_batchedUpdates(() => newEventHandler.call(this, e))
      // 控制是否更新受控组件的 value 值
      finishedEventHandler(node)
    }
    listener.fn = newEventHandler
    node.addEventListener(
      eventName,
      listener
    )
  }

taro/packages/taro-components-library-react/src/react-component-lib/utils/attachProps.ts

Lines 98 to 130 in b3e4a35

	export const syncEvent = (
	node: HTMLElementWithEvents,
	eventName: string,
	newEventHandler?: (e: Event) => any
	) => {
	const eventStore = node.__events ||= {}
	const oldEventHandler = eventStore[eventName]
	if (!newEventHandler && oldEventHandler) {
	node.removeEventListener(eventName, oldEventHandler)
	} else {
	if (oldEventHandler) {
	if (oldEventHandler.fn === newEventHandler) {
	return
	} else {
	// 删除旧的，绑定新的
	node.removeEventListener(eventName, oldEventHandler)
	}
	}
	const listener: EventCenter.EventCallback = eventStore[eventName] = function (e: Event) {
	// React batch event updates
	unstable_batchedUpdates(() => newEventHandler.call(this, e))
	// 控制是否更新受控组件的 value 值
	finishedEventHandler(node)
	}
	listener.fn = newEventHandler
	node.addEventListener(
	eventName,
	listener
	)
	}
	}

[taro-bot2]

您的 Issue 没有按照规范从 Taro Issue Helper 创建，因此会被直接关闭。

维护开源项目是一项非常辛苦的工作，还请多多包涵。
了解为什么这么严格？

[taro-bot2]

您的 Issue 没有按照规范从 Taro Issue Helper 创建，因此会被直接关闭。

维护开源项目是一项非常辛苦的工作，还请多多包涵。
了解为什么这么严格？