web-dev-qa-db-fra.com

Comment aller à une autre page onClick in react

Je suis nouveau pour réagir et j'essaye de charger une autre page quand l'utilisateur clique sur un bouton. J'ai utilisé window.location mais rien ne se passe lorsque je clique sur le bouton. Comment régler ceci?

Ceci où j'ai inclus mon onClick 

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

Fonction écrite pour onClick

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

Si vous voulez vraiment créer une seule application, je vous suggère d'utiliser React Router . Sinon, vous pouvez utiliser du Javascript simple:

Selon votre désir, il y a deux façons principales de le faire:

  1. Style un <a> comme votre bouton
  2. Utiliser un <button> et rediriger par programme

Étant donné que, selon votre question, mon hypothèse est que vous ne construisez pas une application à page unique et n'utilisez pas quelque chose du type du routeur React. Et spécifiquement mentionné l'utilisation de button Voici un exemple de code 

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>
    );
  }
});

Les erreurs que je vois selon ton post 

  1. La fonction qui utilise window.location n'est pas appelée correctement dans la méthode de rendu
  2. Vous pouvez utiliser la méthode window.location.assign() qui aide à charger un nouveau document 
  3. Je doute que les pages JSX soient rendues directement au niveau du navigateur lorsque vous essayez de les appeler directement

J'espère que cela vous aidera, sinon, et que vous trouviez une réponse, partagez s'il vous plaît.

9
Keshan Nageswaran

Vous devez lier le gestionnaire au constructeur de votre composant, sinon React ne pourra pas trouver votre fonction home.

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

Vous devez référencer la méthode en utilisant this, sinon React ne la trouvera pas.

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