event 事件监听实例上的currentTarget 为 null

[JiaLe1]

相关平台

H5

浏览器版本: Google Chrome 已是最新版本 版本 86.0.4240.198（正式版本） (x86_64)
使用框架: React

复现步骤

export default function Index() {

let [banner, setBanner] = useState({ list: [{ uri: '', link: null }] })

const handleRoute = (e) => {

console.log(e.currentTarget.dataset)  // 期望拿到 data-href 的值，实际拿不到

}

return (


{banner.list.map((item, index) => (
<Image className="image" mode="widthFix" src={item.uri && ${IMAGES_URL}${item.uri}}>
))}

  <View data-href="https://m.alyinfo.com" onClick={handleRoute}>路由</View>
</View>

)

}

期望结果

期望拿到 data-href 的值

实际结果

实际拿不到，且 event.currentTarget 为null，
DOM 实例上也并无data- 属性

环境信息

taro info
👽 Taro v3.0.7


  Taro CLI 3.0.7 environment info:
    System:
      OS: macOS 11.0.1
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.0.0 - ~/.nvm/versions/node/v10.0.0/bin/node
      Yarn: 1.19.1 - ~/.nvm/versions/node/v10.0.0/bin/yarn
      npm: 6.14.8 - ~/.nvm/versions/node/v10.0.0/bin/npm
    npmPackages:
      @tarojs/components: 3.0.16 => 3.0.16 
      @tarojs/mini-runner: 3.0.16 => 3.0.16 
      @tarojs/react: 3.0.16 => 3.0.16 
      @tarojs/runtime: 3.0.16 => 3.0.16 
      @tarojs/taro: 3.0.16 => 3.0.16 
      @tarojs/webpack-runner: 3.0.16 => 3.0.16 
      babel-preset-taro: 3.0.16 => 3.0.16 
      eslint-config-taro: 3.0.16 => 3.0.16 
      react: ^16.10.0 => 16.14.0 

[JiaLe1]

想通过 data- 去传数据，发现通过 event 获取不到， h5 的 DOM 上也没有该属性，暂时通过返回函数解决

import React, { useState, useEffect } from 'react'
import { View, Swiper, SwiperItem, Image } from '@tarojs/components'
import Taro, { useDidShow, } from '@tarojs/taro'
import { getReplaceBannerList } from '../../api/base'
import { handleRouter } from '../../utils/ua'
import { AtSearchBar } from 'taro-ui'
// import { debounce } from 'lodash'  //  alipay 导入失败
import { debounce } from 'lodash/function'
import "taro-ui/dist/style/components/search-bar.scss"
import "taro-ui/dist/style/components/button.scss"
import "taro-ui/dist/style/components/icon.scss"

import './index.scss'

const IMAGES_URL = process.env.IMAGES_URL

export default function Index() {

  let [banner, setBanner] = useState({ list: [{ uri: '', link: null }] }),
    [search, setSearch] = useState({ list: [], search: { value: '' }, disabled: false }),
    [debounceOptions, setDebounceOptions] = useState({
      wait: 800, options: {
        'leading': true,
        'trailing': false
      }
    })

  useDidShow(() => {
    console.log('useDidShow')
  })

  useEffect(() => {
    console.log('useEffect')
    async function getBanner() {
      try {
        let data = {
          app: 'h5'
        },
          res: any = await getReplaceBannerList(data)
        if (res.code != 0) return
        let list = res.data
        setBanner({ list })
      } catch (error) {
        console.log(error)
      }
    }
    getBanner()
  }, [])

  const handleRoute = (() => {
    return debounce((e, options) => {
      handleRouter(e, options)
    }, debounceOptions.wait, debounceOptions.options)
  })()




  return (
    <View className='index page safe-area-bottom'>

      <AtSearchBar
        actionName='搜一下'
        value={search.search.value}
        disabled={search.disabled}
        onFocus={(e) => handleRoute(e, { href: '/pages/search/index' })}
      />

      <Swiper
        className='swiper'
        indicatorColor='#999'
        indicatorActiveColor='#333'
        indicatorDots
        autoplay
      >
        {banner.list.map((item, index) => (<SwiperItem key={index}>
          <View className='swiper-item' onClick={(e) => handleRoute(e, { href: item.link })}><Image className="image"
            mode="widthFix" src={item.uri && `${IMAGES_URL}${item.uri}`}></Image></View>
        </SwiperItem>))}
      </Swiper>

      <View onClick={(e) => handleRoute(e, { href: 'https://m.alyinfo.com' })}>路由</View>
      <View className="view-box"></View>
    </View>
  )

}

[ZakaryCode]

dataset 问题在 #9797 中修复，需要升级到 3.3.1+

[ZakaryCode]

事件中 currentTarget 为空是正常的，可以使用 target (参考)

• target is the element that triggered the event (e.g., the user clicked on)
• currentTarget is the element that the event listener is attached to.