Реагировать на клик внутри onClick

Question

Я пытаюсь создать изображение, которое, когда вы нажимаете на него, переводит вас на страницу показа, но также внутри этого изображения мне нужны некоторые кнопки, которые делают другие вещи:

                                   <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

Answer 1

Вы должны проверить, является ли div целью события:

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

Answer 2

Измените свою кнопку onClick, чтобы остановить распространение события на родительский

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