Javascript 在onClick内部对onClick进行反应
我正在尝试制作一个图像,当你点击它时,它会带你进入一个显示页面,但在该图像中,我需要有一些按钮来制作其他东西:Javascript 在onClick内部对onClick进行反应,javascript,reactjs,dom-events,Javascript,Reactjs,Dom Events,我正在尝试制作一个图像,当你点击它时,它会带你进入一个显示页面,但在该图像中,我需要有一些按钮来制作其他东西: <div className="prop-detail" key={dwelling._id} onClick={() => this.props.history.push(`/propiedades/${dwelling._id}`)} > <img src={dwelling.images[0] !== undefined ? dwelling.image
<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>
this.props.history.push(`/propiedades/${homing.\u id}`)}
>
{住宅.价格{住宅.价格}{住宅.货币}:领事馆}
{住宅.空间.房间}h-{住宅.空间.浴室}b
调用{homing.address.streetName}{homing.address.streetNumber},{homing.address.city},{homing.address.state}
this.handleRefs(homing.address,index)}>
{' '}
我的问题是,当我单击按钮时,它也会执行div onClick。更改按钮onClick以停止事件传播到父级
<Button
className="goto"
onClick={(e) => {
e.stopPropagation();
this.handleRefs(dwelling.address, index)
}}>
<FontAwesome name="map-marker" size="25"/>
</Button>{' '}
{
e、 停止传播();
this.handleRefs(homing.address,index)
}}>
{' '}
您必须验证div是否是事件的目标:
<div className="prop-detail" key={dwelling._id}
onClick={ (e)=> (e.target.className==="prop-detail")?
this.props.history.push(`/propiedades/${dwelling._id}`):
false}>
(e.target.className==“道具细节”)?
this.props.history.push(`/propiedades/${living.\u id}`):
false}>