javascript - How to retrive attribute value if user clicked on child element? -

can tell me how retrive data-custom attribute value if click on red square?i dont want place same attribute in child because getting verbose if have more&deeper nested elements.

class example extends react.component {      constructor(props){      super(props)            this.onclick = this.onclick.bind(this)    }        render(){          return (              <div classname="large-box" data-custom="iexist" onclick={this.onclick}>                  <div classname="box red"></div>                </div>            )        }        onclick(e){          console.log(e.target.getattribute('data-custom'))        }    }    reactdom.render(<example />,document.getelementbyid('app'))

.large-box {    display:flex;    width:200px;    height:100px;    border:1px solid black;    }    .box {    margin:auto auto;    width:40px;    height:40px;    }    .red{background-color:red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>  <div id="app"></div>

simple - use event.currenttarget

from: https://developer.mozilla.org/en-us/docs/web/api/event/currenttarget identifies current target event, event traverses dom. refers element event handler has been attached, opposed event.target identifies element on event occurred.

class example extends react.component {      constructor(props){      super(props)            this.onclick = this.onclick.bind(this)    }        render(){          return (              <div classname="large-box" data-custom="iexist" onclick={this.onclick}>                  <div classname="box red"></div>                </div>            )        }        onclick(e){      console.log(e.currenttarget.getattribute('data-custom'))        }    }    reactdom.render(<example />,document.getelementbyid('app'))

.large-box {    display:flex;    width:200px;    height:100px;    border:1px solid black;    }    .box {    margin:auto auto;    width:40px;    height:40px;    }    .red{background-color:red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>  <div id="app"></div>