J'ai un composant réagissant assez simple où je passe le rappel du onclick code> événement à un élément enfant; Cependant, l'événement OnClick ne semble jamais tirer. La classe est ci-dessous, hamburgerMenu code> et hamburger code> est correctement importé / rendu sans événement existant sur ces composants. export default class AppHandler extends React.Component {
componentWillMount() {
this.state = {
menuOpen: false
};
}
render() {
return (
<div>
<HamburgerMenu menuOpen={this.state.menuOpen} />
<div className="content">
<nav>
<Hamburger onClick={this.onMenuChange.bind(this)} />
</nav>
</div>
</div>
);
}
onMenuChange() {
console.log('onMenuChanged');
this.setState({ menuOpen: !this.menuOpen });
}
};
3 Réponses :
Étant donné que vous exportez une classe ES6 et n'utilisez pas Voir Les Documents de réagissage sur aucun autobinateur autobinateur à préparer pourquoi: < / p> Les méthodes suivent la même sémantique que les classes ES6 régulières, ce qui signifie qu'ils ne lient pas automatiquement cela à l'instance. Vous devrez utiliser explicitement .Bind (this) ou fonctions arrow =>.
En outre, vous avez une erreur avec votre état. CreateClass , vous devez lier les gestionnaires à Ceci :
this.setstate ({Mentiopen:! this.menuopen}); définira ivis.state.menuopen , mais puisque vous ne muterez pas le PROP , il ne changera jamais ici:
Merci pour la correction de l'état, mais même lorsqu'une liaison onclick à ceci , la fonction onmenchange n'est jamais appelée. Je vois qu'il y a une fonction effectivement aveuglé à l'événement par le biais d'outils de développement, mais ne le voit pas jamais appelé.
@Benm, on appelle. Lisez la deuxième partie de ma réponse. Vous devez utiliser Mentiopen = {this.state.menuopen} et muter l'état.
Je vois la partie sur l'état de configuration incorrectement, que je reçois, mais je vous connecte à la console avec l'événement Onmenchange et il n'y a pas de sortie. J'ai mis à jour l'exemple pour inclure les corrections, où le onclick ne tire pas toujours.
Cela a finalement fini par ne pas comprendre où l'événement onclick est attaché. Étant donné que le composant lui-même n'est pas vraiment un élément réel lors de la réglage onclick = {this.onmenuchange (this.onmenchange (this)} je ne définit que prop.onclick pour l'élément enfant Hamburger . Afin de réellement obtenir la liaison au travail, je do devez définir onclick = {this.props.onclick} sur l'élément racine du hamburger composant.
Vous n'avez pas besoin de lier ce code> lorsque vous utilisez un composant, il suffit de lier ceci code> dans votre import React from 'react';
import Button from 'components/Button';
class App extends React.Component {
handleClick(e){
console.log(e.target);
}
render(){
return (
<Button Text="Save" onClick={this.handleClick} />
);
}
}
//Button Component
class Button extends React.Component {
clickEventHandler(e) {
this.props.onClick(e);
}
render(){
return (
<button onClick="this.clickEventHandler.bind(this)">{this.props.Text}</button>
);
}
}
Il devrait être
this.onmenuchange.bind (this) , mais vous obtiendriez au moins une erreur de console lorsque vous cliquez. Vous êtes sûr que vous n'obtenez absolument aucune erreur de console lorsque vous cliquez sur?Je vois que quelque chose est effectivement lié au
onclick du composant hamburger mais il n'appelle toujours pasonmenuchange . Donc, il ne jette pas une erreur car il y a en fait quelque chose de liait, mais tout ce qui est contraigné n'est pas correct.