e.target 的 Reactstrap 条件折叠

Question

我正在尝试创建条件折叠以防止页眉中的某些元素切换折叠。例如，我在切换元素中有一个删除按钮，但我不希望它激活切换。

我试过了：

const handleToggle = (e, id) => {
    if(!e.target.classList.contains('remove-btn')) {
        if (isOpen === id) {
            setIsOpen('');
        } else {
            setIsOpen(id);
        }
    }
};

并且还使用 e.target.name:

if(e.target.name !== 'remove-btn') {<allow toggle>}

这是 return 中的切换：

<ListGroupItem
    onClick={() => handleToggle(id)}>
    <Button
        className='remove-btn'
        name='remove-btn'
        onClick={() => handleDelete(id)}>
        &times;
    </Button>
    {name}
</ListGroupItem>

<Collapse>...</Collapse>

如果我点击 ListGroupItem 的任何地方，它应该切换折叠，除非我点击删除按钮，它应该只有运行 handleDelete 功能，并且不切换折叠。

我知道删除最终会删除整个元素，但我也有一个切换折叠的输入，我不希望它这样做。感谢您帮助我理解这一点！

我找到了一个类似的 question 有两个可能的解决方案，但我想知道是否有更好的答案。

Answer 1

我使用了 95faf8e76605e973's answer to this 问题，并简单地将 e.stopPropagation() 函数添加到适当的 onClicks。

<ListGroupItem
    onClick={() => handleToggle(id)}>
    <Button
        className='remove-btn'
        name='remove-btn'
        onClick={(e) => { 
            e.stopPropagation(); 
            handleDelete(id);
        }}>
        &times;
    </Button>
    {name}
</ListGroupItem>

e.target 的 Reactstrap 条件折叠

Reactstrap Conditional Collapse by e.target

toggle

conditional-statements

reactjs

reactstrap