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：

根据您的愿望，有两种主要的做法：

将<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页面会直接在浏览器级别呈现

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

Answer 2

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

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

Answer 3

您需要使用this引用该方法，否则React找不到它。

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

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

3 个答案: