Aktualizacja (9/1/15): OP uczynił to pytanie nieco ruchomym celem. Został ponownie zaktualizowany. Czuję się więc odpowiedzialny za zaktualizowanie mojej odpowiedzi.

Najpierw odpowiedź na podany przez Ciebie przykład:

Możesz to rozwiązać, aktualizując onClick dziecka Na this.props.onClick.bind(null, this):

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

Obsługa zdarzenia w Rodzicu może wtedy uzyskać dostęp do komponentu i zdarzenia w następujący sposób:

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

JSBin migawka

Rodzic zna już dziecko props.

Nie jest to jasne w podanym przykładzie, ponieważ żadne rekwizyty nie są faktycznie dostarczane. Ten przykładowy kod może lepiej wspierać zadawane pytanie: {]}

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} />;
  }
});

W tym przykładzie staje się znacznie jaśniejsze, że już wiesz, jakie są rekwizyty dziecka.

JSBin migawka

Jeśli naprawdę chodzi o używanie dziecięcych rekwizytów, możesz w ogóle uniknąć kontaktu z dzieckiem.

JSX ma spread atrybuty API, których często używam na komponentach takich jak Child. Pobiera wszystkie props i stosuje je do komponentu. Dziecko wyglądałoby tak:

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

Pozwala na użycie wartości bezpośrednio w Rodzicu:

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 migawka

i nie jest wymagana żadna dodatkowa konfiguracja, ponieważ podłączasz dodatkowe komponenty potomne

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>;
  }
});

Migawka JSBin

Solidny praktyczny przykład

Ogólny charakter podanego przykładu jest trudny do omówienia. Stworzyłem komponent, który demonstruje praktyczne zastosowanie w powyższym pytaniu, zaimplementowane w bardzo Reacty sposób:

Przykład pracy DTServiceCalculator
dtservicecalculator repo

Ten komponent jest prostym kalkulatorem usług. Podasz mu listę usług (z nazwami i cenami), a on obliczy łącznie wybrane ceny.

Dzieci są błogimi ignorantami

ServiceItem jest komponentem potomnym w tym przykładzie. Nie ma wielu opinii na temat świata zewnętrznego. To wymaga kilku rekwizytów , z których jeden jest funkcją do wywołania po kliknięciu.

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

Nie robi nic poza wywołaniem dostarczonego handleClick callback z dostarczonym index[źródło].

Rodzice to dzieci

DTServicesCalculator czy komponent nadrzędny jest w tym przykładzie. To także dziecko. Zobaczmy.

DTServiceCalculator tworzy listę komponentów potomnych (ServiceItems) i dostarcza im właściwości [source]. To rodzic-komponent ServiceItem, ale jest to komponent potomny komponentu przekazujący mu listę. Nie posiada danych. Tak więc ponownie deleguje obsługę komponentu do jego komponentu macierzystego źródło

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

handleServiceItem zapisuje indeks, przekazywany od dziecka i przekazuje go rodzicowi [źródło ]

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

Właściciele wiedzą wszystko

Pojęcie" własności " jest ważne w Reaccie. Polecam przeczytać więcej na ten temat tutaj .

W przykładzie, który pokazałem, przekazuję obsługę zdarzenia w górę drzewa komponentów, dopóki nie dotrzemy do komponentu, który jest właścicielem stanu.

Kiedy w końcu tam dotrzemy, zajmiemy się wyborem/usunięciem stanu w ten sposób [źródło]:

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

Podsumowanie

Staraj się utrzymać większość zewnętrznych elementów tak nieprzezroczystych, jak to tylko możliwe. Staraj się upewnić, że mają bardzo mało preferencji co do tego, jak komponent nadrzędny może je wdrożyć.

Bądź świadomy, kto jest właścicielem danych, którymi manipulujesz. W większości przypadków trzeba będzie delegować obsługę zdarzeń w drzewie do komponentu, który jest właścicielem tego stanu.

pomijając: wzór strumienia jest dobrym sposobem na zmniejszenie tego typu niezbędnego podłączenia w aplikacjach.

Wygląda na to, że jest prosta odpowiedź. Rozważ to:

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} />
  }
});

Klucz wywołuje bind(null, this) w zdarzeniu this.props.onClick, przekazanym od rodzica. Teraz funkcja onClick przyjmuje argumenty component i event. Myślę, że to najlepsze ze wszystkich światów.

Aktualizacja: 9/1/2015

To był zły pomysł: przekazanie rodzicowi szczegółów implementacji dziecka nigdy nie było dobrą drogą. Zobacz odpowiedź Sebastiena Lorbera.

Pytanie brzmi, jak przekazać argument z komponentu podrzędnego do komponentu nadrzędnego. Ten przykład jest łatwy w użyciu i przetestowany:

//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")
    );
}

Spójrz na JSFIDDLE

Zasadniczo używasz rekwizytów do wysyłania informacji do i od dziecka i rodzica.

Dodając do wszystkich wspaniałych odpowiedzi, podam prosty przykład, który wyjaśnia przekazywanie wartości z komponentu podrzędnego do komponentu nadrzędnego w Reaccie

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>
      );
   }
}

Nagłówek.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>

      );
   }
}

Main.js

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

import App from './App.jsx';

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

To wszystko , teraz możesz przekazywać wartości ze swojego klienta do serwera.

Spójrz na funkcję zmiany w Nagłówek.js

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

W ten sposób wpychasz wartości do Właściwości z Klienta na Serwer

Oto prosta 3-stopniowa implementacja ES6 wykorzystująca powiązanie funkcji w konstruktorze nadrzędnym. Jest to pierwszy sposób zalecany przez oficjalny samouczek Reacta(nie ma tu również składni pól klasy publicznej). Wszystkie te informacje znajdziesz tutaj https://reactjs.org/docs/handling-events.html

Wiążące funkcje rodzica, aby dzieci mogły je wywoływać (i przekazywać dane do rodzica! : D)

1. upewnij się, że w konstruktorze nadrzędnym powiązałeś funkcję utworzone w rodzicu
2. przekazać funkcję bound w dół do dziecka jako prop (Nie lambda, ponieważ przekazujemy ref do funkcji)
3. wywołanie funkcji bound Z zdarzenia potomnego (Lambda! Wywołujemy funkcję po wywołaniu zdarzenia. Jeśli tego nie zrobimy, funkcja uruchomi się automatycznie po załadowaniu i nie zostanie uruchomiona podczas zdarzenia.)

Funkcja Rodzica

handleFilterApply(filterVals){} 

Konstruktor Rodzica

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

Prop przeszedł do Dziecko

onApplyClick = {this.handleFilterApply}

Wywołanie Zdarzenia Potomnego

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