Question

我有一个React函数组件，该组件返回一个包含子div的div。它包含一个 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 行（包括内部div）都被单击，应触发附加到外部div的 onClick 事件。但是没有，上面的内部div显然没有继承外部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事件

1 个答案: