如何停止项目行外的传播

Question

关于传播的研究还没有给我答案。我有一个使用 div 的 React 列表。每个项目都有一个可点击的行，可将用户带到另一个页面。但是在行内，有用于更新项目的下拉元素。 stopPropagation 已添加到下拉菜单中，这样用户就不会转到其他页面。

但是，如果您打开下拉菜单，然后因为您改变了主意而单击了一侧，则无论如何都会触发行操作并将用户带到另一个页面。我该如何阻止这种情况发生？我不能仅将行容器作为重定向到另一个页面的目标，因为我似乎无法添加对我可以在 event.target 中匹配的那个元素的引用。还有其他方法可以实现吗？

下拉列表

const select = () => (
<Select value={value} onChange={(e) => onChange(e)}>
  {items.map((option) => (
      <MenuItem className={menuItemClass} key={option.id} value={option.id}>
        {option.name}
      </MenuItem>
    ))}
</Select>
)

变化

const onChange = async (event) => {
   event.stopPropagation();
   updateItem();
   ...

行

<TableRowBody onClick={(event) => onClickRow(rowItem, event)}>
   ...
   <select />
   ...
</TableRowBody>

ONCLICKROW

const onClickRow = (value, event) => {
    setValue(value);
};

Answer 1

如果可点击元素可以是 select 的兄弟元素，您可以像这样 css hack：

select:focus ~ .clickable-div{
     pointer-events:none
}
.clickable-div{
    position: absolute;
    height: 100%;
    width: 100%;
}

当select打开（焦点）时，它是兄弟，.clickable-div不会响应点击。

<TableRowBody >
   ....
   <div onClick={(event) => onClickRow(rowItem, event)} className="clickable-div"></div>
   <select />
   ...
</TableRowBody>

如何停止项目行外的传播

How to stop propagation outside item rows

event-propagation

dom-events

reactjs