Perché un evento onClick reagisce aggiungendo un punto interrogativo al mio URL?

Question

Per qualche motivo i miei gestori onClick aggiungono un parametro di query vuoto al mio URL quando faccio clic su di essi. Sono stato in grado di risolvere il problema aggiungendo event.preventDefault ai miei gestori di eventi, ma mi piacerebbe capire meglio cosa è successo realmente e se questa fosse la soluzione corretta. Per il contesto, il codice seguente è un componente semplice per testare alcune funzionalità di OAuth 2. I gestori onClick attivano solo un'azione di reflusso. Vedrai che ho aggiunto e.preventDefault() a tutti loro. Senza questa correzione, ogni volta che si attiva una di queste funzioni, il mio url cambierà da http://localhost:3000/#/signIn a http://localhost:3000/?#/signIn. Sto anche usando 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; 

Answer 1

Il tipo di default di un tag button è submit il che significa che cliccando sul button presenterà il modulo (aggiungendo il ? al tuo URL).

per risolvere il tuo esempio, è possibile aggiungere type="button" ai pulsanti &/o sostituire il <form> con un <div>/<span> (dal momento che il codice non sembrano davvero avere bisogno l'elemento form).

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

valori possibili sono:

• conferma: Il tasto invia i dati del modulo al server. Questa è l'impostazione predefinita se l'attributo non è specificato o se l'attributo è
  modificato dinamicamente in un valore vuoto o non valido.
• reset: il pulsante reimposta tutti i controlli sui valori iniziali.
• pulsante: il pulsante non ha un comportamento predefinito. Può avere script sul lato client associati agli eventi dell'elemento, che sono attivati ​​quando si verificano gli eventi.

Answer 2

Sono abbastanza sicuro che da quando si sta acquisendo il clic di un pulsante da un modulo, senza il preventDefault() la forma è distacco. Poiché non ci sono input nel modulo non ci sono parametri di query. Dato che il modulo non specifica il metodo POST, sta facendo una richiesta get a se stessa che sta aggiungendo una stringa di query vuota. Con preventDefault() si interrompe l'azione di invio del modulo.