点击内部 div 触发外部 div 事件

Question

我有一个 returns 一个 div 包含子 div 的 React 功能组件。它包含一个 Item，并被另一个组件用来填充 Item 行的列表。该列表组件为每个项目提供了一个 onClick 事件函数，我将其放置在每个 Item 的外部 div:

import React from 'react';

const Item = props => {
  const { itemid, data, onClick } = props;
  
  return (
    <div itemid={itemid} type="button" tabIndex={0} onKeyPress={onClick} role="button" onClick={onClick}>
      <div>
        {itemid}
      </div>
      <div>
        {data}
      </div>
    </div>
  )
}

export default Item;

我的想法是每个完整的 Item 行（都在 divs 内），当被点击时，应该触发 onClick事件附加到外部 div。但是没有 - 上面的内部 divs 显然没有从外部 div.

继承 onClick 事件

onClick 事件仅由内部 div 触发，如果我直接将其附加到它们。

有没有办法让内部 div 继承附加到外部 div 的 onClick？

Answer 1

事实证明，这似乎解决了我的问题：

import React from 'react';

const Item = props => {
  const { itemid, data, onClick } = props;
  
  return (
    <div itemid={itemid} type="button" tabIndex={0} onKeyPress={onClick} role="button" onClick={onClick}>
      <div style={{ pointerEvents: 'none' }}>
        {itemid}
      </div>
      <div style={{ pointerEvents: 'none' }}>
        {data}
      </div>
    </div>
  )
}

export default Item;

我想 pointerEvents: 'none' 阻止子 div 被点击，所以外部 div 然后点击。

仍然希望有更好的解决方案，因为这看起来有点奇怪。

点击内部 div 触发外部 div 事件

clicking inner div to trigger outer div event

javascript

event-handling

reactjs