子组件处理点击事件时如果将自身设置为null导致不可见时, 会触发事件冒泡 (已设置e.stopPropagation())

[yangxudong-functorz]

相关平台

微信小程序

复现仓库

https://github.com/yangxudong-functorz/taro_issues/blob/main/issue0.ts
小程序基础库: 2.13.0
使用框架: React

复现步骤

点击红色view, 会触发红色view的onClick事件, 红色view会消失, 同时会触发绿色父组件的onClick事件, 此时console里会出现两条log.

期望结果

红色view消失, console中只显示一条 'i am child' log

实际结果

红色view消失, console中显示i am child' 和 'i am parent'

环境信息

Taro CLI 3.1.0 environment info:
    System:
      OS: macOS 11.2.1
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
      Yarn: 1.17.3 - /usr/local/bin/yarn
      npm: 6.13.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
    npmPackages:
      @tarojs/cli: 3.1.0 => 3.1.0 
      @tarojs/components: 3.1.0 => 3.1.0 
      @tarojs/mini-runner: 3.1.0 => 3.1.0 
      @tarojs/react: 3.1.0 => 3.1.0 
      @tarojs/runtime: 3.1.0 => 3.1.0 
      @tarojs/taro: 3.1.0 => 3.1.0 
      @tarojs/webpack-runner: 3.1.0 => 3.1.0 
      babel-preset-taro: 3.1.0 => 3.1.0 
      eslint-config-taro: 3.1.0 => 3.1.0 
      nerv-devtools: ^1.5.5 => 1.5.7 
      nervjs: ^1.5.5 => 1.5.7 
      react: ^17.0.1 => 17.0.1 
      taro-ui: v3.0.0-alpha.10 => 3.0.0-alpha.10 
    npmGlobalPackages:
      typescript: 3.9.5

---

补充信息

使用如下代码可防止此问题产生:
setTimeout(() => {
setShowChild(false);
}, 0);

[Chen-jj]

可以先用 useCallback 包裹回调函数来绕过。

[yangxudong-functorz]

升级到taro3.1.1, 实测并未修复? @Chen-jj

[Chen-jj]

@yangxudong-functorz 还有问题么？把 lock 文件删除重新安装一下依赖？

[yaobiao131]

3.1.2无法阻止冒泡

[Chen-jj]

3.1.2无法阻止冒泡

@yaobiao131 提供一下代码

[yaobiao131]

const TestTab = () => {

const [loading, setLoading] = useState(false)
return (

<View onClick={async (e) => {
console.log('parent')
}}
>


<Button
loading={loading}
size='small'
onClick={(e) => {
e.stopPropagation()
setLoading(true)
console.log('children')
}}
>点我




)
}

点击修改加载状态的话就无法阻止冒泡

[yaobiao131]

3.0.22版本就没有这个问题

[Chen-jj]

@yaobiao131 复现不了，Taro v3.1.2

import { Component, useEffect, useRef, useState } from 'react'
import { View, Text, Button } from '@tarojs/components'
import Taro from '@tarojs/taro'
import './index.scss'

const TestTab = () => {
  const [loading, setLoading] = useState(false)
  return (
    <View onClick={async (e) => {
      console.log('parent')
      }}
    >
      <Button
        loading={loading}
        size='small'
        onClick={(e) => {
          e.stopPropagation()
          setLoading(true)
          console.log('children')
        }}
      >
        点我
      </Button>
    </View>
  )
}

export default class Index extends Component {
  render () {
    return (
      <View className='index'>
        <TestTab></TestTab>
      </View>
    )
  }
}

[yaobiao131]

import React, { useState } from 'react'
import { Button, ScrollView, View } from '@tarojs/components'

const TestTab = () => {

  const [loading, setLoading] = useState(false)
  return (
    <View onClick={async (e) => {
      console.log('parent')
    }}
    >
      <View>
        <Button
          loading={loading}
          size='small'
          onClick={(e) => {
            e.stopPropagation()
            setLoading(true)
            console.log('children')
          }}
        >点我</Button>
      </View>
    </View>
  )
}

export default TestTab

嵌套view的情况下无法阻止

[xoptimal]

该问题依然存在 ~ 版本 3.2.12 @Chen-jj

[zhejilifang]

该问题依然存在 ~ 版本 3.3.16 @Chen-jj