Réaction - le Déclenchement d'un composant de méthode à partir d'un autre composant, appartenant tous deux dans le même render()

J'ai un composant personnalisé Foo, dont le " bar fonction de je veux de déclenchement de l'extérieur:

class Foo extends React.Component {
   bar() { ... }
}

Je me suis rendu Foo avec un button dont le but est de déclencher Foo.bar():

render() {

 return (
     <Foo ...>
     </Foo>
     <Button onClick={I want to trigger Foo.bar()} />
 );
}

Choses que j'ai essayé:

  1. Déplacement <Button > à l'intérieur de Foo, puis en ajoutant onClick de <Button/> dans Foo's constructeur, la liaison de onClick ne fonctionne pas, je vois qu'il est attaché, mais la <Button /> encore ne déclenche pas onClick. (ou, si cela peut fonctionner, comment le faire correctement)?

Des Solutions qui ne font pas ce que je veux:

  1. J'en vois un solution potentielle qui suggère d'écouter un clic dans l'ensemble de la MyComponent, puis faire un peu de DOM interrogation de trouver si le bouton a été cliqué. Cela ne fonctionne pas pour moi, cependant, parce que MyComponent ne pas propre ces boutons (ces boutons ne sont pas MyComponent.props.children) et je préfère de réfléchir à une solution qui ne me forcer à avoir à déplacer les boutons à l'intérieur.

  2. Une autre solution possible ne fonctionne pas: je ne peut pas avoir le render() retourner la valeur de <MyComponent /> dans un var myComp, puis à l'intérieur de <Button onClick={() => {myComp.blah()}} />, parce que <Button /> lui-même est instancié à l'intérieur de <MyComponent /> comme un enfant! (et, ils sont tous les deux dans le même render() appel de toute façon)

  3. Partie b) #2 (ci-dessus), à l'aide de Réagir-Composante statique de la méthode de classe, ne fonctionnera pas non plus: j'ai besoin de cette par exemple de base.

  4. À l'aide de l'état d'application (comme un magasin) n'est pas ce que je veux, que ce soit -- MyComponent est destiné à être un re-usaable widget et ne peut pas être lié à une application spécifique de l'état ou de l'écoute de toute magasins spécifiques ou magasin d'actions.

Des suggestions?

Grâce

InformationsquelleAutor dev | 2017-02-19
  1. 13

    Vous pouvez définir une fonction sur le parent qui a une ref pour le Foo enfant. Cette fonction fera appel de cette.réf.foo.yourFunction(); Vous pouvez alors passer à cette fonction dans le bouton lorsque le bouton est cliqué, la mère de la fonction sera appelée. Ajout d'un exemple ici où cliquant sur le bouton permet de basculer l'état de la Foo composant (mais il pourrait faire n'importe quoi).

    Exemple ci-dessous

    JS:

    class Parent extends React.Component {
  triggerFoo() {
    this.foo.toggle();
  }
  render() {
    return (
      <div>
        <Foo ref={foo => this.foo = foo} />
        <Button onClick={this.triggerFoo.bind(this)}/>
      </div>
    );  
  }
}

class Foo extends React.Component {
  state = {foo: false}
  toggle() {
    this.setState({
      foo: !this.state.foo
    });
  }
  render() {
    return (
      <div>
        Foo Triggered: {this.state.foo.toString()}
      </div>
    );
  }
}


class Button extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClick}>
        Click This
      </button>
    );
  };
}
ReactDOM.render(<Parent />, document.getElementById('root'));

    HTML:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />

    • Oui, ce serait le travail à merveille. Merci beaucoup pour la clarté de l'explication et de la suggestion 🙂
    • Petite note: Il semble 'string' refs ne sont pas pris en charge par la dernière version réagir? Selon les dernières réagir docs (Février 2017), réf prend maintenant une fonction de callback qui est l'élément que le premier param. Si votre ci-dessus serait ref={(foo) => {cette.foo = foo}} (en fait j'ai été d'obtenir un dur invariant violation en utilisant l'héritage réf api, mais à l'aide de rappel du motif résolu le problème)
    • Oui, c'est une bonne idée. Chaîne de refs doit toujours travailler pour le cas général, mais selon la façon dont votre code est structuré et " il " est lié il me semble qu'il peut conduire à des problèmes. J'ai mis à jour la réponse à réfléchir à l'aide d'une fonction de rappel pour l'réf.
    • j'ai cherché tout sur refs & c'était le meilleur exemple. ty
    • cette réponse vraiment utile 🙂 @noveyak
    InformationsquelleAutor noveyak