mise à jour (9/1/15): le PO a fait de cette question une cible mouvante. Il a été mis à jour à nouveau. Donc, je me sens responsable de mettre à jour ma réponse.

Tout d'abord, une réponse à votre exemple fourni:

Oui, c'est possible.

Vous pouvez résoudre ce problème en mettant à jour onClick de L'enfant pour qu'il soit this.props.onClick.bind(null, this):

var Child = React.createClass({
  render: function () {
    return <a onClick={this.props.onClick.bind(null, this)}>Click me</a>;
  }
});

Le gestionnaire d'événements de votre Parent peut alors accéder au composant et à l'événement comme suit:

  onClick: function (component, event) {
    // console.log(component, event);
  },

JSBin instantané

Mais la question elle-même est trompeuse

Le Parent connaît déjà props de L'enfant.

Ce n'est pas clair dans l'exemple fourni car aucun accessoire n'est réellement fourni. Cet exemple de code pourrait mieux supporter la question posée:

var Child = React.createClass({
  render: function () {
    return <a onClick={this.props.onClick}> {this.props.text} </a>;
  }
});

var Parent = React.createClass({
  getInitialState: function () {
    return { text: "Click here" };
  },
  onClick: function (event) {
    // event.component.props ?why is this not available? 
  },
  render: function() {
    return <Child onClick={this.onClick} text={this.state.text} />;
  }
});

Il devient beaucoup plus clair dans cet exemple que vous savez déjà ce que les accessoires de l'Enfant.

JSBin instantané

S'il s'agit vraiment d'utiliser les accessoires D'un enfant...

S'il s'agit vraiment d'utiliser les accessoires D'un enfant, vous pouvez éviter tout branchement avec L'enfant tout à fait.

JSX a une APIspread attributes que j'utilise souvent sur des composants comme Child. Il prend tous les props et les applique à un composant. Enfant ressemblerait à ceci:

var Child = React.createClass({
  render: function () {
    return <a {...this.props}> {this.props.text} </a>;
  }
});

Vous permettant d'utiliser les valeurs directement dans le Parent:

var Parent = React.createClass({
  getInitialState: function () {
    return { text: "Click here" };
  },
  onClick: function (text) {
    alert(text);
  },
  render: function() {
    return <Child onClick={this.onClick.bind(null, this.state.text)} text={this.state.text} />;
  }
});

JSBin instantané

Et il n " y a pas de configuration supplémentaire requise que vous brancher des composants enfants supplémentaires

var Parent = React.createClass({
  getInitialState: function () {
    return {
      text: "Click here",
      text2: "No, Click here",
    };
  },
  onClick: function (text) {
    alert(text);
  },
  render: function() {
    return <div>
      <Child onClick={this.onClick.bind(null, this.state.text)} text={this.state.text} />
      <Child onClick={this.onClick.bind(null, this.state.text2)} text={this.state.text2} />
    </div>;
  }
});

JSBin instantané

, Mais je soupçonne que ce n'est pas votre cas d'utilisation. Alors creusons plus loin ...

Un exemple pratique robuste

La nature générique de l'exemple fourni est difficile à parler. J'ai créé un composant qui démontre une utilisation pratique pour la question ci dessus, implémenté de manière très Reacty :

DTServiceCalculator exemple de travail
DTServiceCalculator repo

Ce composant est un calculateur de service simple. Vous lui fournissez une liste de services (avec les noms et les prix) et il calculera un total des Prix sélectionnés.

Les enfants sont parfaitement ignorants

ServiceItem est l'enfant du composant dans cet exemple. Il n'a pas beaucoup d'opinions sur le monde extérieur. Il nécessite quelques accessoires , dont l'un est une fonction à appeler lorsque vous cliquez sur.

<div onClick={this.props.handleClick.bind(this.props.index)} />

, Il ne fait rien, mais pour appeler la condition handleClick rappel avec le index[source].

Les Parents sont des enfants

DTServicesCalculator est le parent-composante est de cet exemple. C'est aussi un enfant. Regardons.

DTServiceCalculator crée une liste de l'enfant composant (ServiceItems) et leur offre avec des accessoires [source]. C'est l' parent-component de ServiceItem mais c'est le composant enfant du composant qui lui transmet la liste. Il n'est pas propriétaire des données. Donc, il délègue à nouveau la gestion du composant à son composant parent source

<ServiceItem chosen={chosen} index={i} key={id} price={price} name={name} onSelect={this.props.handleServiceItem} />

handleServiceItem capture l'index, transmis par l'enfant, et le fournit à son parent [source ]

handleServiceClick (index) {
  this.props.onSelect(index);
}

Les propriétaires savent tout

Le concept de "propriété" est important dans React. Je recommande de lire plus à ce sujet ici.

Dans l'exemple que j'ai montré, je continue à déléguer la gestion d'un événement dans l'arborescence des composants jusqu'à ce que nous arrivions au composant propriétaire de l'état.

Quand nous y arrivons enfin, nous gérons la sélection/désélection d'état comme ceci [source]:

handleSelect (index) {
  let services = […this.state.services];
  services[index].chosen = (services[index].chosen) ? false : true;
  this.setState({ services: services });
}

Conclusion

Essayez de garder vos composants les plus externes aussi opaques que possible. Efforcez-vous de vous assurer qu'ils ont très peu de préférences sur la façon dont un composant parent pouvez choisir de les mettre en œuvre.

Tenez compte de qui possède les données que vous manipulez. Dans la plupart des cas, vous devrez déléguer la gestion des événements à l'arborescence au composant propriétaire de cet état.

mis à part: le flux pattern est un bon moyen de réduire ce type de branchement nécessaire dans les applications.

Il semble qu'il y ait une réponse simple. Considérez ceci:

var Child = React.createClass({
  render: function() {
    <a onClick={this.props.onClick.bind(null, this)}>Click me</a>
  }
});

var Parent = React.createClass({
  onClick: function(component, event) {
    component.props // #=> {Object...}
  },
  render: function() {
    <Child onClick={this.onClick} />
  }
});

La clé appelle bind(null, this) sur l'événement this.props.onClick, transmis par le parent. Maintenant, la fonction onClick accepte les arguments component et event. Je pense que c'est le meilleur de tous les mondes.

Mise à jour: 9/1/2015

C'était une mauvaise idée: laisser les détails de l'implémentation de l'enfant s'infiltrer dans le parent n'a jamais été un bon chemin. Voir la réponse de Sébastien Lorber.

La question Est de savoir comment passer l'argument de l'enfant au composant parent. Cet exemple est facile à utiliser et testé:

//Child component
class Child extends React.Component {
    render() {
        var handleToUpdate  =   this.props.handleToUpdate;
        return (<div><button onClick={() => handleToUpdate('someVar')}>Push me</button></div>
        )
    }
}

//Parent component
class Parent extends React.Component {
        constructor(props) {
        super(props);
        var handleToUpdate  = this.handleToUpdate.bind(this);
    }

        handleToUpdate(someArg){
            alert('We pass argument from Child to Parent: \n' + someArg);
    }

    render() {
        var handleToUpdate  =   this.handleToUpdate;
        return (<div>
                    <Child handleToUpdate = {handleToUpdate.bind(this)} /></div>)
    }
}

if(document.querySelector("#demo")){
    ReactDOM.render(
        <Parent />,
        document.querySelector("#demo")
    );
}

Regardez JSFIDDLE

Fondamentalement, vous utilisez des accessoires pour envoyer des informations à et à partir de L'enfant et du Parent.

En ajoutant à toutes les réponses merveilleuses, permettez-moi de donner un exemple simple qui explique le passage de valeurs de l'enfant au composant parent dans React

App.js

class App extends React.Component {
      constructor(){
            super();
            this.handleFilterUpdate = this.handleFilterUpdate.bind(this);
            this.state={name:'igi'}
      }
      handleFilterUpdate(filterValue) {
            this.setState({
                  name: filterValue
            });
      }
   render() {
      return (
        <div>
            <Header change={this.handleFilterUpdate} name={this.state.name} />
            <p>{this.state.name}</p>
        </div>
      );
   }
}

En-tête.js

class Header extends React.Component {
      constructor(){
            super();
            this.state={
                  names: 'jessy'
            }
      }
      Change(event) {

      // this.props.change(this.state.names);
      this.props.change('jessy');
  }

   render() {
      return (
       <button onClick={this.Change.bind(this)}>click</button>

      );
   }
}

Principal.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

C'est tout , maintenant vous pouvez passer des valeurs de votre client au serveur.

Jetez un oeil à la fonction de changement dans le Tête.js

Change(event) {
      // this.props.change(this.state.names);
      this.props.change('jessy');
  }

C'est ainsi que vous poussez les valeurs dans les accessoires du client vers le serveur

Voici une simple implémentation ES6 en 3 étapes utilisant la liaison de fonction dans le constructeur parent. C'est la première façon que le tutoriel officiel react recommande (il y a aussi la syntaxe des champs de classe publique qui n'est pas couverte ici). Vous pouvez trouver toutes ces informations ici https://reactjs.org/docs/handling-events.html

Liaison des fonctions parentes afin que les enfants puissent les appeler (et transmettre des données au parent! : D)

1. assurez-vous que dans le constructeur parent vous liez la fonction vous avez créé dans le parent
2. passez la fonction liée à l'enfant en tant qu'accessoire (pas de lambda parce que nous passons une ref à la fonction)
3. appelez la fonction liée à partir d'un événement enfant (Lambda! Nous appelons la fonction lorsque l'événement est déclenché. Si nous ne le faisons pas, la fonction s'exécutera automatiquement en charge et ne sera pas déclenchée sur l'événement.)

Fonction Parent

handleFilterApply(filterVals){} 

Constructeur Parent

this.handleFilterApply = this.handleFilterApply.bind(this);

Prop passé à Enfant

onApplyClick = {this.handleFilterApply}

Appel D'Événement Enfant

onClick = {() => {props.onApplyClick(filterVals)}