Taro3在默认不阻止冒泡的情况下，当点击事件触发state状态改变时，会冒泡触发state状态改变后的其他组件的click事件

[YinTieShen]

相关平台

H5

复现仓库

https://github.com/YinTieShen/Taro3/blob/main/issue1
浏览器版本: Chrome 62
使用框架: React

复现步骤

import React, { Component } from 'react'
import { View } from '@tarojs/components'
import './index.scss'

export default class Index extends Component {
  state = {
    show: false
  };

  handleTest = () => {
    console.log('触发了打开组件click');
  }
  handleDebug = (flag = true) => {
    this.setState({ show: flag });
  };
  render() {
    const { show } = this.state;
    return (
      <View className='index'>
        <View className="debug">
          {show ? (
            <View className="debug-list" >
                <View onClick={this.handleDebug.bind(this, false)}>
                  关闭
                </View>
                <View >
                  功能1
                </View>
                <View >
                  功能2
                </View>
            </View>
          ) : (
              <View onClick={this.handleTest.bind(this)}>
                <View className="debug-entry" onClick={this.handleDebug.bind(this, true)}>
                  打开
                </View>
              </View>)}
        </View>
      </View>
    )
  }
}

期望结果

handleDebug方法冒泡触发了 handleTest方法肯定是错误的

实际结果

handleDebug方法冒泡触发了 handleTest方法

环境信息

Taro CLI 3.0.25 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 12.4.0 - C:\Program Files\nodejs\node.EXE
      npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD

[YinTieShen]

有没有人啊，复现直接看仓库

[YinTieShen]

https://github.com/YinTieShen/Taro3/blob/main/issue1

[darkfiredarkhalo]

taro版本不超过3.0.22( 超过了则无效),可以使用如下方式:

 const onInfoClick = (e: any) => {
    e.preventDefault();
    e.stopPropagation();
  };

[smartdong]

兄弟, 试下
handleDebug = (flag = true) => {
setTimeout(() => {
this.setState({ show: flag });
}, 0);
};

[YinTieShen]

兄弟, 试下
handleDebug = (flag = true) => {
setTimeout(() => {
this.setState({ show: flag });
}, 0);
};

嗯嗯，直接阻止冒泡就可以解决，只是感觉这是个bug就提了issue，taro2不存在此问题

[ZakaryCode]

这确实是 Taro 的问题导致的，在 3.x 中 react 版本可复现，但是暂时并没有比较好的方法去修复。在 Taro 3.x H5 中没有构建额外的 DOM Tree 去完成事件冒泡的处理，只是借助reactify-wc 实现了事件监听的能力。

目前这个问题暂不考虑修复，组织代码时需尽量避免dom节点增减操作过程中，新增或删除节点上存在关联的冒泡事件监听器这一类情况。