Event composition in react.js

Question

I have a react.js component that has a select with an onChange event handler. I'm reusing that component in a parent component that need to add a certain behaviour to the onChange, but only if certain conditions are met; if not, the behaviour of the child component should apply. The situation pseudocode would be like this:

var ParentComponent = React.createClass({ handleChange: function(event) { if (condition_on_event) { do_something_and_stop_the_handler(); } else { //execute_child_handler } }, render: function() { ... <ChildComponent /> } }); var ChildComponent = React.createClass({ handleChange: function(event) { //child handler code } }, render: function() { ... <select onChange={this.handleChange} /> } });

The idea is that the parent will execute something depending on the value of the select in the child. But only for one value, the rest of the values would execute the child handler normally.

In this situation, if I pass the parent handler as a prop, it would override the child handler, so I would need to duplicate code on the parent.

One solution that comes to mind is that I can pass the handler as a prop with a different name, to use it in the child handler, but it seems like a really dirty solution, as I'm adding an unnecessary prop to the child when is used in isolation.

Any tips?

Passing a prop to the child seems to be an appropriate solution to me. No need to give it a different name. — Felix Kling
– Felix Kling, Commented Nov 23, 2015 at 14:33
@FelixKling but then, how can I compose the behaviour of both handlers? — AntonioHS
– AntonioHS, Commented Nov 23, 2015 at 14:34
Oh I just noticed that you want to conditionally execute depending on the event. Mmh. — Felix Kling
– Felix Kling, Commented Nov 23, 2015 at 14:37
The idea is that the parent will execute something depending on the value of the select in the child. But only for one value, the rest of the values would execute the child handler normally. — AntonioHS
– AntonioHS, Commented Nov 23, 2015 at 14:38

Felix Kling · Accepted Answer · 2015-11-23 14:44:16Z

Since the parent component already seems to kind of know what the child is doing (i.e. it knows that there is some standard event handling logic in the child), how about setting up a stronger contract between the child and the parent?

The parent can pass a callback to the child that is called on change. If that callback returns anything but false, the child will continue with its usual event handling, otherwise it will stop.

Example:

var ParentComponent = React.createClass({ handleChange: function(event) { if (!condition_on_event) { return false; } do_something_and_stop_the_handler(); }, render: function() { ... <ChildComponent onChange={this.handleChange}/> } }); var ChildComponent = React.createClass({ handleChange: function(event) { if (this.props.onChange && this.props.onChange(event) !== false) { //child handler code } }, render: function() { ... <select onChange={this.handleChange} /> } });

That's the idea that seem "dirty" to me, since it the contract is strengthen in both ways (not only the parent knows about the child, the child is modified too). So that's the solution I'll implement if I don't find anything more elegant. Thanks!
Yeah, it's not ideal. However, you would have had to change the child either way, otherwise how should the parent be notified about the change event?
Well, I'm a newbie in reactjs, so I'm still figuring out how the whole thing works :)

Collectives™ on Stack Overflow

Event composition in react.js

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related