[英]How to prevent outer function call in reactjs
Here is my react Code.这是我的反应代码。
OuterOne = () => {
alert("outer calling")
}
InnerOne = (ev) => {
ev.stopPropagation()
alert("here")
console.log(ev.target)
}
<div onRightClick={()=>this.OuterOne()}>
Outer
<br/>
<div onRightClick={(ev)=>this.InnerOne(ev)} style={{ margin:"10px" }}>
INner
</div>
</div>
I have two functions.我有两个功能。
One is Inner and another is Outer .一个是 Inner ,另一个是 Outer 。 When i am calling Inner it calling the outer function because Inner div is wrapped inside outer div.
当我调用Inner 时,它会调用外部函数,因为内部 div 被包裹在外部 div 内。
I wants to call only inner when i am clicking inner and outer function when clicking outer div.我只想在单击外部 div时单击内部和外部函数时调用内部。
The same i tested with javascript it is working, but not working with react.js我用javascript测试过它可以工作,但不能使用react.js
Is there any way to achive this ?有什么办法可以做到这一点吗?
Please have a look.请看一看。
It's working perfectly fine.它工作得很好。
import React from 'react';
const App: React.FC = () => {
const OuterOne = (e) => {
e.preventDefault();
e.stopPropagation();
alert('outer calling');
};
const InnerOne = (e) => {
e.preventDefault();
ev.stopPropagation();
alert('here');
console.log(e.target);
};
return (
<div>
<div onContextMenu={OuterOne}>
Outer
<br />
<div
onContextMenu={InnerOne}
style={{ margin: '10px' }}
>
Inner
</div>
</div>
</div>
);
};
export default App;
Here's on on the class based component:这是基于类的组件:
import React from 'react';
class App extends React.Component{
OuterOne = (e) => {
e.preventDefault();
e.stopPropagation();
alert('outer calling');
};
InnerOne = (e) => {
e.preventDefault();
e.stopPropagation();
console.log(e.button);
alert('here');
console.log(e.target);
};
render() {
return (
<div>
<div onContextMenu={this.OuterOne}>
Outer
<br />
<div
onContextMenu={this.InnerOne}
style={{ margin: '10px' }}
>
Inner
</div>
</div>
</div>
);
}
}
export default App;
Just use onContextMenu
instead of onRightClick
.只需使用
onContextMenu
而不是onRightClick
。
Here, check it out, it's in class based example. 在这里,检查一下,它是基于类的示例。
As stated by Ajay Dabas the onRightClick is not recognized i edited and used onClick handler and it works fine正如 Ajay Dabas 所述,无法识别 onRightClick 我编辑并使用了 onClick 处理程序,它工作正常
OuterOne = () => {
alert("outer calling")
}
InnerOne = (ev) => {
ev.stopPropagation()
alert("here")
console.log(ev.target)
}
render() {
return (
<div onClick={() => this.OuterOne()}>
Outer
<br />
<div onClick={(ev) => this.InnerOne(ev)} style={{ margin: "10px" }}>
INner
</div>
</div>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.