如何获取指定 onClick 的确切元素作为 e.target？

Question

我有一个 React 组件并给它 onClick 事件处理程序：

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

然后我这样使用组件：

<Item onClick={ function(e) {console.log(e.target)} }>
  <span>This element is returned as e.target if clicked on it!</span>
</Item>

当我点击文本时，span 元素被记录为目标，当它在给定范围之外被点击时，li 元素被记录为目标。

问题是：
如果 li 元素中有很多子元素，并且必须获取 id 或 name，这将成为一个“hacky”任务...

问题是：
是否有可能进入处理程序函数，如 e.target 指定 onClick 的确切元素（不是子元素；在本例中为 li）？

PS。如果可能，没有jQuery解决方案。

Answer 1

event.target 将始终为您提供调度事件的元素。为了获得当前处理的侦听器元素，您必须使用 event.currentTarget.

这应该有帮助：https://developer.mozilla.org/en-US/docs/Web/API/Event/Comparison_of_Event_Targets

这里有一个简单的例子来说明你的问题：

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>

Answer 2

是

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>

如何获取指定 onClick 的确切元素作为 e.target？

How to get as e.target the exact element at which onClick is specified?

javascript

events

children

dom-events

reactjs