Z jakiegoś powodu moje procedury obsługi onClick dodają puste zapytanie do mojego adresu URL, gdy je kliknę. Byłem w stanie naprawić problem, dodając event.preventDefault do moich procedur obsługi zdarzeń, ale chciałbym lepiej zrozumieć, co się właściwie stało i czy to było poprawne rozwiązanie. Dla kontekstu poniższy kod jest prostym komponentem do przetestowania funkcjonalności OAuth 2. Funkcje obsługi onClick uruchamiają akcję refluksu. Zobaczysz, że dodałem e.preventDefault() do wszystkich z nich. Bez tej poprawki, w każdej chwili, gdy uruchomię jedną z tych funkcji, mój adres URL zmieni się z http://localhost:3000/#/signIn na http://localhost:3000/?#/signIn. Używam również routera reagowania.Dlaczego reakcja onClick dołącza do mojego adresu URL znak zapytania?
// 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;
Dzięki. To było super pomocne. – Constellates