在 onClick 中反应 onClick答案

【问题标题】：React onClick inside onClick在 onClick 中反应 onClick
【发布时间】：2020-01-15 06:24:55
【问题描述】：

我正在尝试制作一张图片，当您单击它时，它会将您带到一个展示页面，但在该图片内部，我需要一些按钮来制作其他东西：

<div
className="prop-detail"
key={dwelling._id}
onClick={() => this.props.history.push(`/propiedades/${dwelling._id}`)}
>

<img
src={dwelling.images[0] !== undefined ? dwelling.images[0].secure_url: 'https://res.cloudinary.com/sioc/image/upload/v1525712940/epnvioppkpvwye1qs66z.jpg'}
alt=""
/>

<div className="prop-text">
{dwelling.price ? <span>{dwelling.price} {dwelling.currency}</span> : <span>Consulte</span>}
<small> {dwelling.spaces.rooms}h - {dwelling.spaces.bathRoom}b</small>
<p>Calle {dwelling.address.streetName} {dwelling.address.streetNumber}, {dwelling.address.city}, {dwelling.address.state}</p>
</div>

<div className="prop-detail-btns">
<Button
className="goto"
onClick={() => this.handleRefs(dwelling.address, index)}>
<FontAwesome name="map-marker" size="25"/>
</Button>{' '}
<Button className="like">
<FontAwesome name="heart" size="25"/>
</Button>
</div>
</div>

我的问题是当我点击按钮时，它也需要 div onClick。

【问题讨论】：

标签： javascript reactjs dom-events

【解决方案1】：

更改您的 Button onClick 以停止向父级传播事件

<Button
     className="goto"
     onClick={(e) => {
             e.stopPropagation(); 
             this.handleRefs(dwelling.address, index)
     }}>
     <FontAwesome name="map-marker" size="25"/>
</Button>{' '}

【讨论】：

【解决方案2】：

您必须验证 div 是否是事件的目标：

<div className="prop-detail" key={dwelling._id} 
     onClick={ (e)=> (e.target.className==="prop-detail")?
          this.props.history.push(`/propiedades/${dwelling._id}`): 
          false}>

【讨论】：