score:14

Accepted answer

event.target will always give you the element, which dispatched the event. In order to get the element who's listener is currently processed, you have to use event.currentTarget.

This should help: https://developer.mozilla.org/en-US/docs/Web/API/Event/Comparison_of_Event_Targets

Here is a simple example to illustrated your issue:

const Inner = () => <div className="inner">Inner</div>

const Outer = () => {
  const clickHandler = e => {
    console.log('target:', e.target.getAttribute('class'));
    console.log('currentTarget:', e.currentTarget.getAttribute('class'));
  };

  return (<div className="outer" onClick={clickHandler}><Inner /></div>);
};

ReactDOM.render(<Outer/>, document.getElementById('app'));
.outer {
  background: rosybrown;
  padding: 40px;
}

.inner {
  background: cornsilk;
  padding: 20px;
}
<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>

score:0

Yes

const { render } = ReactDOM;
function Item(props) {
  return <li onClick={props.onClick}
             {props.children}
         </li>
}

render( 
  <Item onClick = {
    function(e) {
      console.log(e.currentTarget)
    }
  }>
    <span> This element is returned as e.target if clicked on it! </span>
  </Item>,
  document.getElementById('root')
);
<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="root"></div>


Related Query

More Query from same tag