Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does a react onClick event append a question mark to my url?

For some reason my onClick handlers are adding an empty query param to my url when I click them. I was able to fix the issue by adding event.preventDefault to my event handlers but I would like to better understand what actually happened and if this was the correct solution. For context the code below is a simple component to test out some OAuth 2 functionality. The onClick handlers just trigger a reflux action. You'll see I've added e.preventDefault() to all of them. Without that fix, anytime I trigger one of those functions my url will change from http://localhost:3000/#/signIn to http://localhost:3000/?#/signIn . I am also using react-router.

// dependencies -------------------------------------------------------

import React from 'react';
import hello from '../../libs/hello';
import Actions from '../../actions/Actions';
import UserStore from '../../stores/userStore';

var Signin = React.createClass({

// life cycle events --------------------------------------------------

    componentDidMount: function () {

    },

    render: function () {
        return (
            <form>
                <h2>Sign in with Google</h2>
                <button className="btn btn-primary" onClick={this._signIn} >
                    <i className="fa fa-google" />
                    <span> Google</span>
                </button>
                <button className="btn btn-info" onClick={this._logToken} >Log Token</button>
                <button className="btn btn-warning" onClick={this._signOut}>Sign Out</button>
            </form>
        );

    },

// custom methods -----------------------------------------------------

    _signIn: function (e) {
        e.preventDefault();
        Actions.signIn();
    },

    _signOut: function (e) {
        e.preventDefault();
        Actions.signOut();
    },

    _logToken: function (e) {
    //  e.preventDefault();
        Actions.logToken();
    }

});

export default Signin;
like image 741
Constellates Avatar asked May 27 '15 19:05

Constellates


People also ask

How do I add a question mark in URL react?

Query parameters are added to the end of a URL with a question mark followed by the key-value pairs (? key=value) by using that we can filter the data.

What is event preventDefault () in Reactjs?

The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur. For example, this can be useful when: Clicking on a "Submit" button, prevent it from submitting a form.

How do I stop onClick default in react?

TLDR. The onClick handler allows you to pass a function to a component, which will be executed when it's clicked. Call e. preventDefault() to prevent native default behavior, like submitting a form.

How can we prevent default behavior in react?

We can prevent this default behaviour by making a small modification to the definition of the handleSubmit function. We call a preventDefault on the event when submitting the form, and this will cancel the default event behavior (browser refresh) while allowing us to execute any code we write inside handleSubmit.


2 Answers

The default type of a button tag is submit which means clicking the button will submit your form (appending the ? to your url).

To fix your example, you can add type="button" to your buttons &/or replace your <form> with a <div>/<span> (since your code doesn't really seem to need the form element).

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

Possible values are:

  • submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is
    dynamically changed to an empty or invalid value.
  • reset: The button resets all the controls to their initial values.
  • button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.
like image 153
pherris Avatar answered Oct 14 '22 10:10

pherris


I am pretty sure that since you are capturing the click of a button from a form, without the preventDefault() the form is posting. Since there are no inputs in the form there are no query parameters. Since the form doesn't specify the POST method it is doing a get request back to itself which is adding an empty query string. With the preventDefault() you are stopping the form submit action.

like image 23
rasicoc Avatar answered Oct 14 '22 11:10

rasicoc