react如何拦截点击事件？

Question

<div id='container'>
<ReactComp />
</div>

组件ReactComp中有自己的点击事件，现在不想它响应点击事件，需要在id为container的div上怎么做才可以拦截其事件？

Answer 1

react的事件是绑定在document上面的，所以阻止冒泡就行：

// container是react的ref对象
container.current.addEventListener('click', e => { e.stopPropagation() })

Answer 2

stopClick = (e) => {
    e.preventDefault();
}

...

<div id='container' onClick={this.stopClick}>
    <ReactComp />
</div>

Answer 3

如果不单单是一个div ，可以写一个高阶函数，做统一处理，根据DOM 的ID进行任务判断。 传入 params。然后将执行函数传入进去。

  const hocFun=(params:any,fn:Function)=>{
      console.log("login-params",params);
      if(params.islog){
        console.log("login");
        fn();
      }else{
        console.log("notlogin");
      }
    }

    const goBack=()=>{
      console.log("返回----");
    }~~~~