React JS - What is a good way to handle children click event?

Question

I have a list with around 2k items. If I use onClick on each child, I would end up with 2k listeners which is what I have currently. I would want to do something like making the parent component listen to the click events instead. But if I do that, I don't have reference to the child component which I need to call setState on. Also the list of child components can be filtered dynamically (using this.refs might be bad ?).

The best I can come up with is to make a hash of child components id mapping to child components in the parent and look up the view on click.

Just for illustration purposes:

 var Parent = React.createClass({ shouldComponentUpdate: function() { return false; }, handler: function(e) { // look up from reference and set state }, componentWillUnmount: function() { // clean up reference }, render: function() { this.reference = {}; var items = []; for(var i = 0; i < this.props.items.length; i++) { var child = React.createClass(Child, {id: this.props.items[i].id}); items.push(child); reference[child.id] = child; } return React.createClass('div', {onClick: this.handler}, items); } })

I wonder if there is a React way of dealing with this.

Have you taken a look at using a Flux dispatcher? You would be able avoid having so many listeners using a dispatcher + a Store. — Pavan Ravipati
– Pavan Ravipati, Commented Jun 29, 2015 at 21:39
I am not using a full fledge Flux. But I am using something similar. However if the child were to create an action when clicked, it would have to have a listener on click I think. — Flmhdfj
– Flmhdfj, Commented Jun 29, 2015 at 21:41
oh I see what you mean. So I can move the reference stuff to the store. so each item subscribe to the store on mount. — Flmhdfj
– Flmhdfj, Commented Jun 29, 2015 at 21:52

Community · Accepted Answer · 2017-05-23 12:34:19Z

I think this answer may help... It does not matter if you have 2000 event handlers or just one. React deals with it in the same way. Remember that the HTML you return in your render method does not get added to the DOM but it is just used by React to build a virtual DOM representation. In the end, React has only one onClick.

React efficient way to bind event to many dom elements

If you need to know what element triggered the click you just need to access event.target and use any data-attribute to identify the clicked element.

This article says otherwise though: The trouble isn’t really that creating a function is an expensive operation. It’s that by creating a new function every time, the component you’re passing it to will see a new value for that prop every time...

Pavan Ravipati · Accepted Answer · 2015-06-29 22:12:46Z

The React way of doing this would be to use a Flux dispatcher + a Store. Basically, you can have each item bind to an event that gets triggered from the store once the store has carried out the tasks you want it to complete.

So the flow will be:

Item gets clicked => Flux event is dispatched => Flux dispatcher hears the events and executes the appropriate function with the data passed from Item component.

 var ItemStore = { doSomething: function(data){ // do something with the data } } MicroEvent.mixin(ItemStore); var AppDispatcher = new Dispatcher(); AppDispatcher.register(function(payload) { switch (payload.eventName) { case 'item-clicked': ItemStore.doSomething(payload.data.someData); ItemStore.trigger('did-something'); } return true; }) var Item = React.createClass({ shouldComponentUpdate: function() { return false; }, componentDidMount: function() { ItemStore.bind('did-something', this.submitHandled); }, handler: function(e) { AppDispatcher.dispatch({ eventName: 'item-clicked', data: { someData: 'sample data' } }); }, componentWillUnmount: function() { // clean up reference }, submitHandled: function() { // do something after the click }, render: function() { // insert your item's html here. } })

Flux really over complicates things here. You've turned what could be a stateless Item component into an Item component that's fetching data from stores and dispatching actions. Also, you still have 2,000 onClick handlers plus an additional 2,000 store change event listeners.
+FakeRainBrigand Exactly! People, if you don't understand a framework, don't implement stuff blindly!

Brigand · Accepted Answer · 2015-06-30 05:08:54Z

Building on @damianmr's answer, here's an example.

var Child = React.createClass({ shouldComponentUpdate(nextProps){ if (this.props.text !== nextProps.text) return true; if (this.props.active !== nextProps.active) return true; return false; }, render(){ var className = 'Child'; if (this.props.active) className += ' Child-active'; return ( <div {...this.props} className={className}> {this.props.text} </div> ); } });

var Parent = React.createClass({ getInitialState(){ return {active: -1}; }, setActive(id){ this.setState({active: id}); }, render(){ return ( <div> {this.props.items.map((item) => { return ( <Child active={this.state.active === item.id} onClick={() => this.setActive(item.id)} text={'My id is ' + item.id} key={item.id} /> ); })} </div> ); } });

Collectives™ on Stack Overflow

React JS - What is a good way to handle children click event?

3 Answers 3

1 Comment

2 Comments

Comments

Linked

Hot Network Questions