How to handle onclick for disappearing elements with react-spring?

I have an app where I have a horizontal list of items, that when you click them they should disappear and trigger some action. Minimal demonstration here: Code: https://codesandbox.io/s/5xpkn3nzxl

Try clicking away the head of the list fairly quickly until there are none remaining. Notice how the event generated doesn't match what it looks like you are clicking on, and you end up with duplicates. Expected output would be only one event per item, and that click events over the top of a remaining item should go to that item, rather than the one that is disappearing. I'm not sure if this is a bug or not, but I'm looking for suggestions on how best to handle.

(I'm open to suggestions of other libraries also if they handle this better than react-spring.)

1 Answers

Answers 1

You can just add an early return to your clickHandler if you find the item is already in this.state.clicked.

clickHandler(item) {     if (this.state.clicked.some(clickedItem => item.key === clickedItem.key)) {         return;     }     return (e) => {         this.setState({             clicked: this.state.clicked.concat([item]),             items: this.state.items.filter((x) => x.key != item.key)         });         console.log(item);     } } 

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati