2015-05-27 46 views
6

由於某種原因,當我點擊它們時,我的onClick處理程序正在爲我的url添加一個空的查詢參數。我能夠通過將event.preventDefault添加到我的事件處理程序來解決此問題,但我想更好地瞭解實際發生的情況以及這是否是正確的解決方案。對於上下文,以下代碼是測試某些OAuth 2功能的簡單組件。 onClick處理程序只是觸發迴流操作。你會看到我已經將e.preventDefault()添加到它們中。沒有這種修復,任何時候我觸發這些功能之一,我的網址將從http://localhost:3000/#/signIn更改爲http://localhost:3000/?#/signIn。我也在使用react-router。爲什麼onClick事件會在我的url上附加一個問號?

// 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; 

回答

17

button標籤的默認類型是submit這意味着點擊button將提交您的表單(將?附加到您的網址)。

要解決你的榜樣,您可以添加type="button"到您的按鈕& /或更換您的<form><div>/<span>(因爲您的代碼不會似乎真的需要form元素)。

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

可能的值有:

  • 提交:該按鈕的表單數據提交到服務器。如果未指定屬性,或者屬性爲
    動態更改爲空值或無效值,則這是默認值。
  • 重置:該按鈕將所有控件重置爲其初始值。
  • button:該按鈕沒有默認行爲。它可以有客戶端腳本與元素的事件關聯,當事件發生時觸發該事件。
+0

謝謝。這非常有幫助。 – Constellates

6

我非常確定,由於您正在捕獲單擊按鈕從窗體,沒有preventDefault()表單發佈。由於表單中沒有輸入,所以沒有查詢參數。由於表單沒有指定POST方法,因此它正在執行一個get請求回到自己,該請求添加了一個空的查詢字符串。使用preventDefault(),您將停止表單提交操作。

相關問題