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';
}
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:
<a>
comme votre bouton<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
window.location
n'est pas appelée correctement dans la méthode de renduwindow.location.assign()
qui aide à charger un nouveau document JSX
soient rendues directement au niveau du navigateur lorsque vous essayez de les appeler directementJ'espère que cela vous aidera, sinon, et que vous trouviez une réponse, partagez s'il vous plaît.
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);
}
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>