score:2
Accepted answer
as stated by ajay dabas the onrightclick is not recognized i edited and used onclick handler and it works fine
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>
)
}
score:3
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
.
Source: stackoverflow.com
Related Query
- How to prevent outer function call in reactjs
- How to pass in a second argument on ReactJS onSubmit function call
- How to call another component from onClick function in ReactJS
- How do you call a jQuery function on a ReactJS element from .jsx script?
- reactjs how to call method inside map function
- How to call the method inside the function (Clicking the a href to logout) using ReactJS
- how I call back function using reactjs
- How to call a class function from another in ReactJs
- How to call Parent containers function from child component in Reactjs
- ReactJS How to prevent multiple API calls occurring in componentDidMount function
- How to call function in ReactJS in a callback within the same component?
- how to call a function after completion of setting of group of state variables of functional component in reactjs
- How do i call function in functional component - ReactJs
- ReactJS How to call a function that opens a simple modal?
- How to call function before render in reactjs
- ReactJs redux : How to call a function from the render function if the prop value change?
- how to call function inside reactjs render method properly?
- How to render stateHook result from the function call in ReactJS
- How to call defaultExportCsv() of ReactJS material-table from the overriden export function
- how to fix `Expected an assignment or function call and instead saw an expression` error in ReactJS
- How to call function from another file in reactjs
- ReactJs Functional Component - How to call function from outside?
- reactjs this context is changed inside on change method how call function
- how to call a function after completion of setting a state variable of a functional component in reactjs
- How to call ReactJS function with event (event.ctrlKey)?
- ReactJS How to call a function to change JSON dict value after setState?
- How To Call A JavaScript Function Returned From NodeJS in ReactJS JSX
- How to keep Reactjs API calling function in independent page and call from component?
- ReactJS how to call a component function from another function on the same file?
- How to call loading function with React useEffect only once
More Query from same tag
- Insert map result inside table
- React context provider and consumer
- Abort component unmount?
- Can not update the list of items?
- React Javascript Undefined Variable
- testcafe selector does not find 'div' elements
- Problems with React-Router
- window not defined error while using reactJs, Redux and import sweetalert
- React - How do I display the first value of an array as the default value in a select form?
- how to add inline style in a tag?
- How do make textinput background transparent on map on react-native
- How to pass fetched data as props to a component with react hooks?
- React - routing when there is a hash inside of a routing parameter
- Change React-Table default styling
- Why is the exact keyword not working on NavLink?
- Argument of type 'number[]' is not assignable to parameter of type 'SetStateAction<ICoord | undefined>'
- ant design tabs .ant-tabs-tab-active class remove bottom blue border
- connect multiple combined reducers in redux with conditional
- react intl remove error logs and list keys
- How can I override components from another module?
- React Native Dynamically Inject Component at Runtime
- where do we get the props in render method in React.js
- How correctly Open "div" by ID ReactJS
- Fetch data from a smart contract array
- How to access env variables using react?
- How can I pass the value from my function to another component in another file
- Can't Assign Component to Variable When Checking for Prop
- setState not triggered from onChange method of CreatableSelect
- Tailwind CSS background Image not Working with @apply
- How to make the image appear with an animation effect from right to left