React阻止事件冒泡的正確開啟方式

2022-03-14 11:00:04 字數 1019 閱讀 2403

需求:點選導航list按鈕出現側彈框,點選空白處彈框消失

問題:繫結空白處的點選事件到document上,但是非空白處的點選也會觸發這個點選事件,在react中如何阻止事件冒泡?

解決方法:e.stoppropagation()並不奏效,react有專屬的阻止事件冒泡方法,e.nativeevent.stopimmediatepropagation()

示例:

/*

* * created by sunzhuoyi on 17/3/6. */

import react from 'react';

import from 'react-redux';

import from 'core-decorators';

import from 'redux-router';

import store from '@comynli/store';

import from 'antd';

@connect(state =>({}),)

export

default

class common extends react.component

} componentdidmount()

@autobind

handleclick(e) );

} @autobind

handleinlineclick(e) );

} @autobind

handlebardisplay(e))

} @autobind

handlebardisplayshow())

} render()

mode="horizontal"style=}

>/>

: }

poseidon

style=}

mode="inline"

>

project

project

: }) }

}

react阻止冒泡事件

最近在研究react redux等,網上找了很久都沒有完整的答案,如果對你有用就關注一下,以後都會有乾貨分享的,謝謝。首先,要知道再react中的合成事件和原生事件之間的區別 1 合成事件 在jsx中直接繫結的事件,如 ref aaa onclick 更新a 這裡的handleclick事件就是合成...

React阻止事件冒泡

react 如何阻止事件冒泡?答案採納者 notebin 主頁 react 為提高效能,有自己的一套事件處理機制,相當於將事件 到全域性進行處理,也就是說監聽函式並未繫結到dom元素上。因此,如果你禁止react事件冒泡e.stoppropagation 你就無法阻止原生事件冒泡 你禁用原生事件冒泡...

react中阻止事件冒泡

直接看栗子 頁面上3個div,如圖所示 1 在沒有涉及到原生事件註冊只有react事件時,用e.stoppropagation 阻止冒泡,如下 import react,from react import class extends component handleclicktestbox2 e h...