Search code examples
javascriptreactjsreact-bootstrap

How to disable right click for a react bootstrap card?


Please see the image first

If i right click mouse, this option menu pops up. But i want nothing should come. How can i do that?

My Code:

 <div>
    <Link to={{
        pathname: "/announcement",
        state: {courseId: this.state.selectedCourseId}
    }}
        className="link">
        <Card className="primaryCardDesign">
            <Card.Header className="primaryCardHeader">
                <Card.Title>
                    Announcement
                </Card.Title>
            </Card.Header>
            <Card.Body className="primaryCardBody">
                A declaration you want to share among the class
            </Card.Body>
        </Card>
    </Link>
</div>

Solution

  • Add onContextMenu event with an empty handler that prevents the opening of the context menu :

     <Card className="primaryCardDesign" onContextMenu={e=>e.preventDefault();}>