ReactJS: onClick gestionnaire qui ne se déclenche pas lorsqu'il est placé sur un composant enfant

J'ai récemment commencé à travailler avec ReactJS. Plus précisément, je suis en utilisant le react-rails ruby gem et react-bootstrap composants.

J'ai une question concernant placer onClick des écouteurs d'événement dans les composants enfants.

Comme vous pouvez le voir dans l'exemple de code ci-dessous, j'ai un composant parent qui "appelle" un composant enfant dans ses render fonction. Dans ce render fonction, j'ai pu Réagir onClick auditeur qui appelle handleToggle lorsqu'il est cliqué.

###* @jsx React.DOM ###

ToggleIconButton = React.createClass
  getInitialState: ->
    toggleOn: false
  handleToggle: (evt) ->
    this.setState(toggleOn: !this.state.toggleOn)
  render: ->
    `<IconButton onClick={this.handleToggle}>Toggle Button</IconButton>`

IconButton = React.createClass
  render: ->
    # BsButton and BsGlyphicon are React-Bootstrap components
    `<BsButton>
      <BsGlyphicon glyph={this.props.glyph} />
      {" " + this.props.text}
     </BsButton>`

Malheureusement, cela ne fonctionne pas de la façon que je l'aurais cru. ToggleIconButton::handleToggle n'est jamais appelé. Au lieu de cela, le onClick écouteur est placé sur IconButton et références ToggleIconButton::handleToggle.

ReactJS: onClick gestionnaire qui ne se déclenche pas lorsqu'il est placé sur un composant enfant

Je ne veux pas ajouter de comportement à IconButton. La façon dont je le vois, pas de logique conditionnelle doit être placé dans IconButton. Tout cela doit faire est de représenter une icône et d'un bouton et de ne pas avoir à vous soucier de tout type de navigateur d'événements. C'est ce que ToggleIconButton est pour.

Alors que je sais que je pourrais envelopper un React Div autour de IconButton et d'écrire un onClick auditeur (j'ai essayé et ça marche), il semble que c'est un peu janky.

Quelqu'un connais un bon moyen de faire cela? Merci les gars!

double de peut-on associer des gestionnaires de clic pour enfant personnalisé composants
il y a une différence subtile pour <ActualJSXChildComponents /> qui fait les réponses ici la peine de lire

InformationsquelleAutor Kurt Mueller | 2014-06-08

react-jsx reactjs

80

Donc, la bonne façon de gérer le concours complet dans ce cas serait de passer le gestionnaire d'événement vers le bas pour le composant enfant. Il ya quelques façons d'accomplir ce que vous voulez, et je pourrais implémenter ce comportement différemment (pas sûr de ce que le cas d'utilisation), mais j'ai câblé un exemple dans JSX pour vous qui démontre l'événement typique de la manipulation entre le Parent et l'Enfant Composants. Vous pouvez le trouver ici...

JS Fiddle

Il suffit de penser de cette façon:
```
var ParentComponent = React.createClass({
    render: function(){
        return (
            <ChildComponent onSomeEvent={this.handleThatEvent} />;
        )
    },
    handleThatEvent: function(e){
         //update state, etc.
    }
});

var ChildComponent = React.createClass({
    render: function(){
        return (
           <input type="button" onClick={this.props.onSomeEvent} value="Click Me!" />
        )
    }
});
```
- Merci de la pac. Comme vous pouvez le voir dans le post original, je ne fait ont ReactJS outils de dev installé :). Bien que je comprenne que l'intérieur de mon enfant composant je peux ajouter un onClick auditeur qui va appeler une fonction de l'enfant props, il me semble que je ne devrais pas avoir à le faire... si le composant enfant ne doit pas nécessairement avoir un onClick auditeur dans d'autres contextes? Que faire si je veux utiliser ce composant dans un autre composant parent, mais pas un onClick auditeur? N'est-il pas de nuire à la réutilisation d'un composant? Laissez-moi savoir si ce n'est pas logique.
- Vous avez raison monsieur, je glosé droit sur ça 🙂 Donc, ce qu'on pourrait faire, c'est de conclure que composant dans un div, et d'enregistrer le onClick pour que la div pour obtenir les fonctionnalités que vous souhaitez sans polluer l'ChildComponent avec ce comportement. Quelque chose comme <div onClick={présent.handleToggle}> <ChildComponent /> </div>
- Aussi, sans clairement le passage de cet événement à l'ChildComponent, vous ne pouvez pas exactement appeler onClick sur elle, depuis le Composant lui-même n'est pas vraiment un élément HTML, donc onClick n'est pas définie pour elle.
- fonctionne parfaitement!
- Merci cela a très bien fonctionné!
- Merci! Sauver ma journée! 😀 Inutile de dire, on doit prendre soin de la liaison du composant parent pour corriger champ & comportement.
- Wow, Merci! Il est vraiment utile 🙂
InformationsquelleAutor captray
9

Vous n'avez pas besoin de faire un composant enfant si avant d'appeler le nœud de vous créer un var pour référence le rendu de ce savoir
```
var self = this;
```
Ainsi, par exemple (ce qui est artificiel et le var, l'auto n'est pas nécessaire dans ce cas, mais dans le cas de imbriquée retour des déclarations, il serait nécessaire).
```
var ParentComponent = React.createClass({
    render: function(){
        var self = this;
        return (
            <input type="button" onClick={self.handleThatEvent} value="Click Me!" />;
        )
    },
    handleThatEvent: function(e){
         //update state, etc.
    }
});
```
Mieux encore, vous pouvez lier cela à la fonction.
```
var ParentComponent = React.createClass({
    render: function(){
        return (
            this.state.array.map(function(){
              return (<input type="button" onClick={this.handleThatEvent} value="Click Me!" />);
            }.bind(this));
        )
    },
    handleThatEvent: function(e){
         //update state, etc.
    }
});
```
Ou de suivre captray de la suggestion dans les commentaires
```
var ParentComponent = React.createClass({
    render: function(){
        return (
            this.state.array.map(function(){
              return (<input type="button" onClick={this.handleThatEvent} value="Click Me!" />);
            }, this);
        )
    },
    handleThatEvent: function(e){
         //update state, etc.
    }
});
```
- Ce champ d'application ne l'handleThatEvent ont? Aura-t-elle l'enfant accessoires ou les parents des accessoires?
- Essayez et vous verrez. Mais il serait les parents, comme par la liaison.
- super, merci de cette solution fonctionne lorsque vous avez plusieurs retours(3 dans mon cas)
- handleThatEvent a la portée de la fonction. Ainsi, dans le premier exemple, puisque l'auto est une variable définie à l'extérieur de la fonction, handleThatEvent est attaché à l'autonomie et de l'auto est le parent est présent (puisque l'auto est réglé pour le ce de la société mère et n'est pas définie à une valeur différente de l'enfant). Dans le deuxième exemple handleThatEvent a le parent est-ce à cause de l' .bind(ce) appel. Les deux fonctions ont leur propre champ d'application si.
- Juste un heads-up, pour ceux qui cherchent à utiliser bind dans ce scénario,... de Nombreux fonctionnelle des appels comme carte et filtre à accepter un second paramètre, qui fait la même chose que de se lier, il définit le contexte d'exécution pour ce qui est transmis, de sorte que vous pouvez les appeler .map(function(item) { //faire quelque chose }, this);
- C'est génial! Je suis nouveau à Réagir et c'était juste refactoring mon appli pour être plus simple et plus élégante ... passé une journée à essayer de comprendre pourquoi certains imbriquée enfant^parent appels ont été brisées. Ce (no pun intended) fixe tout!
- [eslint] JSX accessoires ne doivent pas utiliser la flèche fonctions (réaction/jsx-pas-bind)
InformationsquelleAutor vipero07

Vous devez vous connecter pour publier un commentaire.