1

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.

Enzo B.
  • 2,341
  • 1
  • 11
  • 33
ellerymoon
  • 35
  • 6
  • check `if(event.target.id)` and then perform your operation?? – Aseem Upadhyay Jul 19 '18 at 09: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 Jul 19 '18 at 09:36

2 Answers2

3

You can use currentTarget:

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

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

Azamat Zorkanov
  • 779
  • 1
  • 4
  • 9
1

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)
     }
 }
Murat Karagöz
  • 35,401
  • 16
  • 78
  • 107