如何防止嵌套React组件中的事件冒泡点击?

这是一个基本组件。<ul>和<li>都有onClick函数。我只想在<li>上的onClick来触发，而不是<ul>。我怎样才能做到这一点呢?

我已经玩了e.preventDefault()， e.stopPropagation()，没有任何效果。

class List extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClick() {
    // do something
  }

  render() {

    return (
      <ul 
        onClick={(e) => {
          console.log('parent');
          this.handleClick();
        }}
      >
        <li 
          onClick={(e) => {
            console.log('child');
            // prevent default? prevent propagation?
            this.handleClick();
          }}
        >
        </li>       
      </ul>
    )
  }
}

// => parent
// => child

当前回答

这并不是100%理想的，但是如果在儿童->儿童时尚中传递道具太痛苦，或者创建Context. provider /Context。消费者只是为了这个目的)，并且你正在处理另一个库，它有自己的处理程序，它在你的库之前运行，你也可以尝试:

   function myHandler(e) { 
        e.persist(); 
        e.nativeEvent.stopImmediatePropagation();
        e.stopPropagation(); 
   }

据我所知，这件事。persist方法可以防止对象立即被扔回React的SyntheticEvent池。因此，在React中传递的事件在你到达它的时候实际上并不存在!这种情况发生在孙辈中，因为React处理内部的事情的方式是首先检查父级的SyntheticEvent处理程序(特别是如果父级有一个回调)。

只要你没有调用持久化，这将创建重要的内存继续创建事件，如onMouseMove(你没有创建某种Cookie Clicker游戏，如奶奶的饼干)，这应该是完全没问题的!

另外请注意:通过偶尔阅读他们的GitHub，我们应该密切关注React的未来版本，因为他们可能最终会解决一些痛苦，因为他们似乎正在朝着在编译器/编译器中折叠React代码的方向发展。

2019-04-03 00:11:13

其他回答

   function myHandler(e) { 
        e.persist(); 
        e.nativeEvent.stopImmediatePropagation();
        e.stopPropagation(); 
   }

只要你没有调用持久化，这将创建重要的内存继续创建事件，如onMouseMove(你没有创建某种Cookie Clicker游戏，如奶奶的饼干)，这应该是完全没问题的!

2019-04-03 00:11:13

我也有同样的问题。我发现stopPropagation确实有用。我将把列表项拆分为一个单独的组件，如下所示:

class List extends React.Component {
  handleClick = e => {
    // do something
  }

  render() {
    return (
      <ul onClick={this.handleClick}>
        <ListItem onClick={this.handleClick}>Item</ListItem> 
      </ul>
    )
  }
}

class ListItem extends React.Component {
  handleClick = e => {
    e.stopPropagation();  //  <------ Here is the magic
    this.props.onClick();
  }

  render() {
    return (
      <li onClick={this.handleClick}>
        {this.props.children}
      </li>       
    )
  }
}

2016-09-05 12:46:03

这是一种简单的方法，可以防止单击事件向前移动到下一个组件，然后调用你的yourFunction。

<Button onClick={(e)=> {e.stopPropagation(); yourFunction(someParam)}}>Delete</Button>

2020-10-03 05:29:44

可以通过检查事件目标来避免事件冒泡。例如，如果你有输入嵌套到div元素，你有处理点击事件的处理器，你不想处理它，当输入被点击，你可以只传递事件。目标放入你的处理程序并检查处理程序是否应该基于目标的属性执行。例如，你可以检查如果(目标。localName === "input") {return}。因此，这是一种“避免”处理程序执行的方法

2019-06-14 15:32:28

React在文档中使用事件委托和单个事件监听器来处理冒泡事件，比如本例中的'click'，这意味着停止传播是不可能的;当你在React中与它交互时，真实的事件已经传播了。在React的合成事件上stopPropagation是可能的，因为React在内部处理合成事件的传播。

stopPropagation: function(e){
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
}

2017-06-16 10:44:16

如何防止嵌套React组件中的事件冒泡点击?

推荐文章

最新文章

标签