React.js: attach event from parent to children

Question

as shown in the example below, I want MyComponent to dynamically attach the "onClick" event to its children. The onClick event should fire an alertView, which should be able to call the clicked element "getValue" method.

JSFiddle: http://jsfiddle.net/2g638bp8/

How to do it? Thanks

var MyComponent = React.createClass({ alertValue: function () { // RETRIEVE THE CHILD HERE alert(child.getValue()); }, render: function () { var children = React.Children.map(this.props.children, function (c, index) { return React.addons.cloneWithProps(c, { ref: 'child-' + index }); }); return ( <div> {children} </div> ); } }); var MySubComponent = React.createClass({ getValue: function () { return this.props.val; }, render: function () { return ( <div>{this.props.val}</div> ); } }); React.render( <div> <MyComponent> <MySubComponent val="1" /> <MySubComponent val="2" /> <MySubComponent val="3" /> </MyComponent> </div>, document.getElementById('container') ); 

Answer 1

You cannot call methods on child components in React. You can only set properties. ( child is actually a ReactElement that contains information about the class and its related properties. This is not an instance of the component that you created).

So, you could think of it a little different and move onClick to MySubComponent :

 var MyComponent = React.createClass({ onHandleGiveValue: function (value) { alert(value); }, render: function () { var self = this, children = React.Children.map(this.props.children, function (c, index) { return React.addons.cloneWithProps(c, { onGiveValue: self.onHandleGiveValue.bind(self) }); }); return ( <div> {children} </div> ); } }); var MySubComponent = React.createClass({ handleClick: function() { this.props.onGiveValue(this.props.val); }, getValue: function () { return this.props.val; }, render: function () { return ( <div onClick={ this.handleClick } >{this.props.val}</div> ); } }); React.render( <div> <MyComponent> <MySubComponent val="1" /> <MySubComponent val="2" /> <MySubComponent val="3" /> </MyComponent> </div>, document.getElementById('container') ); 

That way, your code can pass the current value as an event to the parent component. I created a new event from the MySubComponent class named onGiveValue . At the moment, the value from this.props.val is simply passed. But of course, it could be anything.

Answer 2

• Pass the parent response to the subcomponent, you do not need a link for the child component.

• React prefers composition design template. Thus, your parent component should contain three subcomponents. JS Fiddle: http://jsfiddle.net/68vt3umg/

   var MyComponent = React.createClass({ handleChildClick: function (e, childValue) { alert(childValue); }, render: function () { return ( <div> <MySubComponent val="1" onSubClicked={this.handleChildClick}/> <MySubComponent val="2" onSubClicked={this.handleChildClick}/> </div> ); }}); var MySubComponent = React.createClass({ getValue: function () { return this.props.val; }, handleOnClick: function (e, value) { this.props.onSubClicked(e, this.props.val); }, render: function () { return ( <div onClick={this.handleOnClick}>{this.props.val}</div> ); } }); React.render( <div> <MyComponent /> </div>, document.getElementById('container') );