我的按钮（onClick）在可点击组件上不起作用答案

【问题标题】：my button(onClick) did'nt work over clickable component我的按钮（onClick）在可点击组件上不起作用
【发布时间】：2021-12-29 20:36:22
【问题描述】：

this is my screen 我有一个可点击的组件（产品）。他的一个孩子也是一个按钮。但是当我点击它时，产品的功能就会执行。我怎样才能让我的按钮单独执行？

                    <ProductForm>
                   {
                       this.state.list.map((obj)=>{
                           return <Product
                           onselect={()=>{
                               this.select(obj.id)
                            }}
                           ondlt={()=>{this.dlt(obj.id)}}
                           key={obj.id}
                           obj={obj}/>
                       })
                   }
                </ProductForm>

//他的子按钮：

删除

【问题讨论】：

听起来你需要使用 event.stopPropagation()。基本上它可以防止事件冒泡：developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
stopPropagation 会起作用，但它是一个创可贴。问题在于嵌套的交互元素使得交互对每个人来说都非常糟糕。不仅开发难，不得不用的可怜用户也会受苦。
然而，走这条路线 id 认为preventDefault 更正确。由于卡片点击的默认动作是弹出卡片。您可以在删除点击上preventDefault 和在卡片上e.isDefaultPrevented 或类似的东西来确定您是否应该处理默认操作。即弹出卡片。

标签： javascript html css reactjs

【解决方案1】：

只需将它们分成不同的部分，然后用position: absolute 将子按钮放在顶部，这是我制作的一个沙盒示例

Example

【讨论】：