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

更改按钮onClick以停止事件传播到父

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

Answer 2

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

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

在onClick里面点击onClick

2 个答案: