如何进入另一个页面onClick in react

Question

我是新手做出反应,我试图在用户点击按钮时加载另一个页面.我使用了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';
}

Answer 1

如果你真的想构建一个应用程序我建议使用React Router.否则你可以使用普通的Javascript:

根据您的愿望,有两种主要的做法:

1. 样式<a>为按钮
2. 以<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>
    );
  }
});

我根据你的帖子看到的错误

1. window.location在render方法中没有正确调用使用的函数
2. 您可以使用window.location.assign()有助于加载新文档的方法
3. 我怀疑JSX当您尝试直接调用它们时,页面会直接在浏览器级别呈现

希望这会有所帮助,如果没有,你想出答案请分享

Answer 2

您需要在组件的构造函数中绑定处理程序,否则React将无法找到您的home函数.

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