how can i handle event capturing in react component?

Question

Please read code first.

After css processing, it seems like memo application's single memo paper.

The goal of the component is to print a 1 when clicked(in real, the goal is to hadding redux store's state).

When i click outside of div component, it works very well. ( it printed '1' ) but when i clicked inner div component(title, date,content), onClick event also proceed ( it printed '') how can i prevent non-valued print?

My code :

class container extends Component { handleState = (event) => { console.log(event.target.id) } render(){ return( <div onClick={handleState} id={value}> <div>title</div> <div>date</div> <div>content</div> </div> ) } } container.defaultprops = { value: 1 }

thanks.

check if(event.target.id) and then perform your operation?? — Aseem Upadhyay
– Aseem Upadhyay, Commented Jul 19, 2018 at 9:33
yes. it works well(it printed '1'). the problems is when i clicked inner div part(title, date, content part), onclick event also proceed, and there's no value. so it printed ''. I want to print a same value any part of the div. — ellerymoon
– ellerymoon, Commented Jul 19, 2018 at 9:36

Azamat Zorkanov · Accepted Answer · 2018-07-19 09:37:09Z

You can use currentTarget:

handleState = (event) => { console.log(event.currentTarget.id) }

About difference between target and currentTarget: https://stackoverflow.com/a/10086501/5709697

Murat Karagöz · Accepted Answer · 2018-07-19 09:35:47Z

You can use currentTarget to check if it's the target since you bound the handler to the parent e.g.

 handleState = (event) = > { if (event.target == event.currentTarget) { console.log(event.target.id) } }

Collectives™ on Stack Overflow

how can i handle event capturing in react component?

My code :

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

My code :

2 Answers 2

1 Comment

Comments

Linked

Related