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，那么它就变成了＆＃34; hacky＆＃34;任务...

问题是：是否有可能将处理函数作为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

以下是一个说明问题的简单示例：

＆＃13;

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'));

＆＃13;

.outer {
  background: rosybrown;
  padding: 40px;
}

.inner {
  background: cornsilk;
  padding: 20px;
}

＆＃13;

<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>

＆＃13;

Answer 2

是

＆＃13;

dotnet restore

＆＃13;

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')
);

＆＃13;

如何获得e.target指定onClick的确切元素？

2 个答案: