CODEWITHSUNDEEP
javascriptreactjs
Alex Barbulescu
Alex Barbulescu

Reputation: 331

How to process onClick and not href <a>

So I'm using a jquery plugin and for it to work properly I have to have my book now button (styled to look like a button) be inside an anchor tag. My react component looks like this:

export default class Header extends React.Component {
constructor(props){
    super(props);
    this.state ={
        showModal: false,
    };
    this.openModal = this.openModal.bind(this);
    this.exitModal = this.exitModal.bind(this);
}


openModal(){
    console.log('hello');
    this.setState(()=> ({showModal: true}));
    return false;
}

exitModal(){
    this.setState(()=> ({showModal: false}));
}

render(){
    return (
        ...

            <li>
                <a id="navbar-book" href="#" onClick={this.openModal} className="book-button"><span>Book Now</span></a>
            </li>
        ...
             <BookModal 
                showModal={this.state.showModal}
                exitModal={this.exitModal}
            />  

    )
}

};

I don't want to have an href but if I don't have it my dropotron plugin won't work on it. I've already tried to return false from the function in hopes that href wouldn't run. All I need it to do is run the modal.

Upvotes: 1

Views: 84

Answers (2)

Jo&#227;o Cunha
Jo&#227;o Cunha

Reputation: 10297

You can use a button like this: 

<button onClick={this.openModal}>Book Now</button>

But if you really must use a link you must use preventDefault on the click event like this:

openModal(event){
    event.preventDefault();
    this.setState(()=> ({showModal: true}));
    return false;
}

Upvotes: 2

gabriella-varga
gabriella-varga

Reputation: 411

How about replacing it with a button?

<button onClick={this.openModal}>Book Now</button>

Upvotes: 1

Related Questions