如何轉到另一個頁面點擊反應

我是新來的反應，我試圖加載另一個頁面，當用戶點擊一個按鈕。我已經使用window.location但沒有任何反應，當我點擊按鈕。如何解決這個問題？如何轉到另一個頁面點擊反應

這在那裏我有我的包含的onClick

<div> 
    <img className="menu_icons" src={myhome}/> 
    <label className="menu_items" onClick={home}>Home</label> 
</div>

函數的onClick

function home(e) { 
    e.preventDefault(); 
    window.location = 'my-app/src/Containers/HomePage.jsx'; 
}

來源

2017-02-20 CraZyDroiD

你在使用'react router'嗎？ –

您是否找到您問的問題的解決方案？ –

你需要參考使用this的方法寫的，否則陣營沒有找到它。

<div> 
    <img className="menu_icons" src={myhome}/> 
    <label className="menu_items" onClick={this.home}>Home</label> 
</div>

來源

2017-02-20 05:49:46

不，如果我包含「this」，它將不起作用。我已經測試了一個警報。它沒有顯示「this」。 – CraZyDroiD

你可以發佈你有什麼全部？我只需要看看你的組件。 –

如果您嘗試重定向到瀏覽器無法識別的「jsx」頁面，它將不起作用。它必須是一個'html'頁面。 –

如果你真的想建立一個應用程序，我會建議使用React Router。否則，你可以只使用普通的JavaScript：

有根據您的願望，這樣做的兩種主要方式是你想：

風格的<a>爲您的按鈕
使用<button>和重定向編程

由於根據你的問題，我的假設是，你不是建立一個單一的頁面的應用程序，並沿着React路由器使用的東西。並特別提到使用button下面是一個示例代碼

var Component = React.createClass({ 
    getInitialState: function() { return {query: ''} }, 
    queryChange: function(evt) { 
    this.setState({query: evt.target.value}); 
    }, 
    handleSearch: function() { 
    window.location.assign('/search/'+this.state.query+'/some-action'); 
    }, 
    render: function() { 
    return (
     <div className="component-wrapper"> 
     <input type="text" value={this.state.query} /> 
     <button onClick={this.handleSearch()} className="button"> 
      Search 
     </button> 
     </div> 
    ); 
    } 
});

錯誤我根據您的文章看

它採用window.location沒有正確調用渲染方法的功能
你可以使用window.location.assign()方法，這有助於加載新文檔
我懷疑JSX頁面是直接在瀏覽器級別呈現，當您嘗試直接調用它們時

希望這會有所幫助，如果不能和你找出答案，請分享

來源

2017-02-20 10:02:57

你需要在你的組件的構造函數的處理程序綁定，否則陣營將無法找到你的home功能。

constructor(props) { 
    super(props); 
    this.home = this.home.bind(this); 
}

來源

2017-02-20 13:33:46 grizzthedj

與handleClick函數一起工作！ – HomeMade

如何轉到另一個頁面點擊反應

回答

相關問題