Question

我有一个完整的视图，其中包含一个onClick处理程序和一个带有自己的onClick处理程序的视图。当我点击除按钮之外的任何地方时，我希望点击绑定到视图的onclick。我希望仅在单击按钮时才会触发按钮上的onclick。

onClick(event){
    event.stopPropagation();
    this.props.onClick(this.props.item)
}

onDeleteClick(){

}

render(){

    const paper = {
        height: 180,
        width: 400,
        backgroundColor : "#ECEFF1",
        display : "flex",
        flexDirection : "column",
        cursor: this.state.cursor
    }


    const littlePartStyle = {
        width : "100%", height : 40, display : "flex", alignItems : "center", marginLeft : 30
    }


    return(
        <Paper onClick={(event) => {this.onClick(event)}} onMouseLeave={() => {this.onMouseLeft()}} onMouseOver={() => {this.onMouseOver()}} style={paper} >
                <div  style={{width : "100%", height : "30%", alignItems : "center",  display : "flex"}}>
                    <div style={{display : "flex", marginLeft : 30, width : "50%", fontSize : 20}}>{this.props.item.name}</div>
                    <div style={{width : "50%"}}>
                        <Button onClick={() => {this.onDeleteClick()}} style={{backgroundColor : "black", color : "white", marginLeft : 70, overflow : "hidden"}}>Delete</Button>
                    </div>
                </div>
            <div style={{width : "100%", height : "70%", display : "flex", flexDirection : "column"}}>
                <div style={littlePartStyle}>
                    <div>Session organizer : {this.props.item.organizer}</div>
                </div>
                <div style={{width : "80%", height : 1,  backgroundColor : "black", marginLeft : 30}}>
                </div>
                <div style={littlePartStyle}>
                    <div>Session subject : {this.props.item.subject}</div>
                </div>
                <div style={{width : "80%", height : 1,  backgroundColor : "black", marginLeft : 30}}>
                </div>

                <div style={littlePartStyle}>
                    <div>Creation date : {this.props.item.creationDate}</div>
                </div>


            </div>
        </Paper>
    )
}

Answer 1

只需将事件传递给onDelete处理程序并停止传播：

onClick(event){
    event.stopPropagation();
    this.props.onClick(this.props.item)
}

onDeleteClick(event){
    event.stopPropagation();
    //do something
}

render() {
    return (
        <Paper onClick={ e => this.onClick(e) }>
           ///
           <Button onClick={ e => this.onDeleteClick(e) } >Your button</Button>
           ///
        </Paper>
    )
}

Answer 2

在这种情况下，您需要安装另一个名为FirebaseStorage storage = FirebaseStorage.getInstance(); StorageReference storageReference = storage.getReference(); Glide.with(context) .using(new FirebaseImageLoader()) .load(storageReference.child("users/"+grupo.getUsuario()+"/"+grupo.getTitulo())) .into(holder.portada); //Here goes what im trying to pursue: a while that wouldn't exit until the image is loaded. while(hasnt finished downloading);的{{1}}模块根据需要单独设置npm两个组件react-onclickoutside。使用FullViewComponent渲染您的视图。然后在你的 InnerButtonComponent.js

中

InnerButtonComponent

就是这样。

处理好ReClickJS上的onClick

2 个答案: