Обновление (9/1/15): ОП поставил этот вопрос немного движущейся мишенью. Его снова обновили. Поэтому я отвечаю, чтобы обновить свой ответ.

Во-первых, ответ на предоставленный вами пример:

Да, это возможно.

Это можно решить, обновив Childs onClick как this.props.onClick.bind(null, this):

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

Обработчик событий в вашем родителе может затем получить доступ к компоненту и событию следующим образом:

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

Снимок JSBin

Но сам вопрос вводит в заблуждение

Родитель уже знает Childs props.

Это не ясно в приведенном примере, поскольку на самом деле никаких реквизитов не предоставляется. Этот пример кода может лучше поддерживать задаваемый вопрос:

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

В этом примере становится намного понятнее, что вы уже знаете, каковы реквизиты Ребенка.

Снимок JSBin

Если он действительно использует реквизиты Childs...

Если он действительно использует реквизиты Childs, вы можете вообще избежать взаимодействия с ребенком.

JSX имеет атрибуты распространения API, который я часто использую на таких компонентах, как Child. Он принимает все props и применяет их к компоненту. Ребенок будет выглядеть так:

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

Позволяет использовать значения непосредственно в родительском устройстве:

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

И нет необходимости в дополнительной настройке при подключении дополнительных дочерних компонентов

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

Но я подозреваю, что это не ваш фактический прецедент. Так что давайте копаем дальше...

Надежный практический пример

Общий характер представленного примера трудно обсуждать. Ive создал компонент, который демонстрирует практическое использование для вышеупомянутого вопроса, реализованного очень эффективным образом:

Рабочий пример DTServiceCalculator
DTServiceCalculator repo

Этот компонент является простым калькулятором обслуживания. Вы предоставляете ему список услуг (с именами и ценами), и он рассчитает общее количество выбранных цен.

Дети блаженно невежественны

ServiceItem является дочерним компонентом в этом примере. У него нет много мнений о внешнем мире. Для него требуется несколько реквизитов, одна из которых - это функция, которая будет вызываться при нажатии.

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

Он делает только вызов вызываемого handleClick обратного вызова с предоставленным index [source].

Родители - дети

DTServicesCalculator является родительским компонентом в этом примере. Это тоже ребенок. Посмотрим.

DTServiceCalculator создает список дочернего компонента (ServiceItem s) и предоставляет им реквизиты [source]. Его родительский компонент ServiceItem, но он является дочерним компонентом компонента, передающим ему список. Он не владеет данными. Поэтому он снова делегирует обработку компонента его родительскому компоненту source

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

handleServiceItem фиксирует индекс, переданный из дочернего элемента, и предоставляет его родительскому элементу < source]

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

Владельцы знают все

Концепция "Собственность" является важной в Реактировании. Я рекомендую прочитать больше об этом здесь.

В приведенном выше примере Ive я продолжаю делегировать обработку события до дерева компонентов до тех пор, пока мы не перейдем к компоненту, которому принадлежит состояние.

Когда мы, наконец, доберемся туда, мы обрабатываем выбор/отключение состояния так [source]:

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

Заключение

Постарайтесь, чтобы ваши внешние компоненты были максимально непрозрачными. Стремитесь убедиться, что у них очень мало предпочтений относительно того, как родительский компонент может выбрать их реализовать.

Имейте в виду, кто владеет данными, которыми вы управляете. В большинстве случаев вам необходимо делегировать обработку событий по дереву компоненту, которому принадлежит это состояние.

Кроме того: Flux pattern - хороший способ уменьшить этот тип необходимого подключения в приложениях.

Появляется простой ответ. Рассмотрим это:

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

Ключ вызывает bind(null, this) в событии this.props.onClick, переданном из родителя. Теперь функция onClick принимает аргументы component, AND event. Я думаю, что лучший из всех миров.

ОБНОВЛЕНИЕ: 9/1/2015

Это была плохая идея: позволить деталям реализации ребенка течь в родителя никогда не был хорошим путем. См. Ответ Себастьяна Лорбер.

Вопрос заключается в том, как передать аргумент от дочернего к родительскому компоненту. Этот пример прост в использовании и проверке:

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

Посмотрите на JSFIDDLE

В основном вы используете реквизиты для отправки информации от и от Child и Parent.

Добавляя все замечательные ответы, позвольте мне привести простой пример, объясняющий передачу значений от дочернего к родительскому компоненту в 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>
      );
   }
}

Header.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'));

Это означает, что теперь вы можете передавать значения с вашего клиента на сервер.

Взгляните на функцию изменения в Header.js

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

Вот как вы вставляете значения в реквизиты с клиента на сервер

Вот простая трехэтапная реализация ES6 с использованием привязки функций в родительском конструкторе. Это первый способ, рекомендуемый официальным учебным пособием (существует также синтаксис полей открытых классов, который здесь не рассматривается). Вы можете найти всю эту информацию здесь https://reactjs.org/docs/handling-events.html

Связывание родительских функций, чтобы дети могли их вызвать (и передать данные до родителя!: D)

• Убедитесь, что в родительском конструкторе вы связываете функцию, созданную в родительском
• Передайте связанную функцию вниз ребенку в качестве пропеллера (нет лямбда, потому что мы передаем функцию ref)
• Вызов связанной функции из дочернего события (Lambda! Мы вызываем функцию при запуске события.   Если мы этого не сделаем, функция будет автоматически запускаться при загрузке и не запускаться в событии.)

Родительская функция

handleFilterApply(filterVals){} 

Родительский конструктор

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

Prop, переданный ребенку

onApplyClick = {this.handleFilterApply}

Вызов детского события

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