如何防止反应组件单击事件气泡记录到文档？ [英] How to prevent react component click event bubble to document?
本文介绍了如何防止反应组件单击事件气泡记录到文档？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何防止响应组件单击事件起泡至文档？
I可以确定一定有问题！
所以，也许我应该自己解决这个问题！
我只有一个具有单击事件侦听器的box组件，并且该框中有一些受文档click事件影响的链接组件。如何删除此文档单击事件？
有人可以帮我一个忙吗？
更多详细信息可以可以在以下链接中找到！
这是代码链接：
- 删除
文档的点击事件
- 在那之后，它就可以了！
这有什么问题？
从'react'导入React，{组件};从'prop-types'导入PropTypes;从'./logo.svg'导入徽标;导入'./App。 css'; //从'./SideBox.js'导入SideBox; //从'./ContentBox.js'导入ContentBox; / *从'./test.js'导入SidebarExample; * ///从'。 react-dom / server';从'react-router-dom'导入{BrowserRouter as Router，Route，Link};导入Item1 f rom'./components/Item1.js';从'./components/Item2.js'导入Item2;从'./components/Item3.js'导入Item3;从'antd'导入{Menu，Icon};导入' antd / dist / antd.css'; const SubMenu = Menu.SubMenu; const element =< h1" Hello，world< / h1> ;; const elements =（）=> {return（< h1>你好，世界< / h1>）;}; const路由= [{路径：‘/’，精确：true，侧边栏：（）=> < div> item1< / div> ;, main：（）=> < div>< Item1 />< / div> }，{路径：‘/ item2’，侧边栏：（）=> < div> item2< / div> ;， main：（）=> < div>< Item2 //< / div> }，{路径：‘/ item3’，侧边栏：（）=> < div> item3< / div> ;， main：（）=> < div>< Item3 />< / div> }]类App扩展了Component {构造器（props）{super（props）; this.state = {消息：props.message，样式：props.styles，任意：props.any，宽度：props.width，主题：暗，当前： 1}； this.handleMenuClick = this.handleMenuClick.bind（this）; this.handleClick = this.handleClick.bind（this）; }; handleClick（e）{console.log（‘click’，e）; this.setState（{current：e.key，}）; }; // ES7属性初始化程序语法handleMenuClick =（e）=> {e.preventDefault（）; // e.stopPropagation（）; // e.nativeEvent.stopImmediatePropagation（）; console.log（'this is：'，this）; console.log（ clicked === \n，e）; if（this.state.styles === App-SideBox-init）{this.setState（{消息： e.key，样式： App-SideBox-New，宽度： width：40px; }）; } if（this.state.styles === App-SideBox-New）{this.setState（{消息： Hello！，样式： App-SideBox-init，宽度： width：300px; }）; } console.log（ this.state.message ===，this.state.message）; console.log（ this.state.styles ===，this.state.styles）; }; componentDidMount（）{/*window.addEventListener('scroll'，this.onScroll.bind（this），false）; * / // window.removeEventListener（'click'，this.handleMenuClick.bind（this），false）; // window.removeEventListener（'click'，this.handleClick.bind（this），false）; }; render（）{return（< div className = App>< div className = App-header>< img id = img src = {logo} className = App-logo alt = 徽标样式= {this.props.width} />< h2>欢迎使用React< / h2>< / div>< div className = App-SideBox>< div className = {this .state.styles}>< Router>< div>< div style = {{display：'flex'}}>< div style = {{padding：'10px'，width：'30％' ，背景：'＃f0f0f0'}}>< div className = SideBox-body style = {{display：'flex'}}> < Menu theme = {this.state.theme} onClick = {this.handleClick} style = {{width：240}} defaultOpenKeys = {['sub1']} selectedKeys = {[this.state.current]} mode = 内联> < SubMenu key = sub1 title = {< span> <图标类型=邮件 /> < span>导航一< / span> < / span> }> < Menu.Item key = 1> <链接到= /> item1< / Link> < /Menu.Item> < Menu.Item key = 2> <链接到= / item2> item2< / Link> < /Menu.Item> < Menu.Item key = 3> <链接到= / item3> item3< / Link> < /Menu.Item> < / SubMenu> < /菜单> < / div> < / div> < / div> < / div> < /路由器> < / div> {/*onClick={this.handleMenuClick}*/}< div onClick = {this.handleMenuClick} className = App-SideBox-btn> < span>图标< / span> < / div> < / div> < div className = App-body> <路由器> < div> < div> < div style = {{flex：1，padding：‘10px’}}> {route.map（（route，index）=>（<路由键= {index}路径= {route.path}精确= {route.exact}组件= {route.main} />））}}< ; / div> < / div> < / div> < /路由器> < / div> < / div> ）; }}; App.defaultProps = {消息：'Hello！'，样式：'App-SideBox-init'}; App.propTypes = {消息：PropTypes.string.isRequired，样式：PropTypes.string.isRequired，宽度：PropTypes .string}；导出默认应用；
解决方案
只需在父组件上创建所有事件处理程序，然后将它们传递给儿童使用道具！
How to prevent react component click event from bubble up to document ?
I can sure that there must be something was wrong with it!
So, may be I should help myself fix it!
I just have a box component which has a click event listener, and there are some link components in that box which are effected by a document click event. How can I remove this document click event?
Can someone do me a favor?
More details info can be found in following links!
Here is the code link : https://github.com/ant-design/ant-design/issues/6576
- Click has no effect, it should link to
item3!
- Remove
document's click event
- After that, it works!
What's wrong with this?
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import logo from './logo.svg';
import './App.css';
// import SideBox from './SideBox.js';
// import ContentBox from './ContentBox.js';
/*import SidebarExample from './test.js';*/
// import ReactDOMServer from 'react-dom/server';
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom';
import Item1 from './components/Item1.js';
import Item2 from './components/Item2.js';
import Item3 from './components/Item3.js';
import {Menu, Icon} from 'antd';
import 'antd/dist/antd.css';
const SubMenu = Menu.SubMenu;
const element = <h1>Hello, world</h1>;
const elements = () => {
return(
<h1>Hello, world</h1>
);
};
const routes = [
{
path: '/',
exact: true,
sidebar: () => <div>item1</div>,
main: () => <div><Item1 /></div>
},
{
path: '/item2',
sidebar: () => <div>item2</div>,
main: () => <div><Item2 /></div>
},
{
path: '/item3',
sidebar: () => <div>item3</div>,
main: () => <div><Item3 /></div>
}
]
class App extends Component {
constructor(props) {
super(props);
this.state = {
message: props.message,
styles: props.styles,
Any: props.any,
width: props.width,
theme: 'dark',
current: '1'
};
this.handleMenuClick = this.handleMenuClick.bind(this);
this.handleClick = this.handleClick.bind(this);
};
handleClick(e) {
console.log('click ', e);
this.setState({
current: e.key,
});
};
// ES7 property initializer syntax
handleMenuClick = (e) => {
e.preventDefault();
// e.stopPropagation();
// e.nativeEvent.stopImmediatePropagation();
console.log('this is:', this);
console.log("clicked === \n", e);
if(this.state.styles === "App-SideBox-init"){
this.setState({
message: "e.key",
styles: "App-SideBox-New",
width: "width: 40px;"
});
}
if(this.state.styles === "App-SideBox-New"){
this.setState({
message: "Hello!",
styles: "App-SideBox-init",
width: "width: 300px;"
});
}
console.log("this.state.message === ", this.state.message);
console.log("this.state.styles === ", this.state.styles);
};
componentDidMount() {
/*window.addEventListener('scroll', this.onScroll.bind(this), false);*/
// window.removeEventListener('click', this.handleMenuClick.bind(this), false);
// window.removeEventListener('click', this.handleClick.bind(this), false);
};
render() {
return (
<div className="App">
<div className="App-header">
<img id="img" src={logo} className="App-logo" alt="logo" style={this.props.width}/>
<h2>Welcome to React</h2>
</div>
<div className="App-SideBox">
<div className={this.state.styles}>
<Router>
<div>
<div style={{ display: 'flex' }}>
<div style={{
padding: '10px',
width: '30%',
background: '#f0f0f0'
}}>
<div className="SideBox-body" style={{ display: 'flex' }}>
<Menu
theme={this.state.theme}
onClick={this.handleClick}
style={{ width: 240 }}
defaultOpenKeys={['sub1']}
selectedKeys={[this.state.current]}
mode="inline"
>
<SubMenu
key="sub1"
title={
<span>
<Icon type="mail" />
<span>Navigation One</span>
</span>
}
>
<Menu.Item key="1">
<Link to="/"> item1</Link>
</Menu.Item>
<Menu.Item key="2">
<Link to="/item2">item2</Link>
</Menu.Item>
<Menu.Item key="3">
<Link to="/item3">item3</Link>
</Menu.Item>
</SubMenu>
</Menu>
</div>
</div>
</div>
</div>
</Router>
</div>
{/*onClick={this.handleMenuClick}*/}
<div onClick={this.handleMenuClick} className="App-SideBox-btn">
<span>icon</span>
</div>
</div>
<div className="App-body">
<Router>
<div>
<div>
<div style={{ flex: 1, padding: '10px' }}>
{
routes.map((route, index) => (
<Route
key={index}
path={route.path}
exact={route.exact}
component={route.main}
/>
))
}
</div>
</div>
</div>
</Router>
</div>
</div>
);
}
};
App.defaultProps = {
message: 'Hello!',
styles: 'App-SideBox-init'
};
App.propTypes = {
message: PropTypes.string.isRequired,
styles: PropTypes.string.isRequired,
width: PropTypes.string
};
export default App;
解决方案
Just make all event handlers on the parent component, and then pass them to children by using props!
这篇关于如何防止反应组件单击事件气泡记录到文档？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
