Javascript 在ReactJS上处理好onClick

我有一个带有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>
    )
}

onClick（事件）{
event.stopPropagation（）；
this.props.onClick（this.props.item）
}
onDeleteClick（）{
}
render（）{
常数纸={
身高：180，
宽度：400，
背景颜色：“ECEFF1”，
显示：“flex”，
flexDirection:“列”，
游标：this.state.cursor
}
常量littlePartStyle={
宽度：“100%”，高度：40，显示：“柔性”，对齐项目：“中心”，边缘左侧：30
}
返回(
{this.onClick（event）}onMouseLeave={（）=>{this.onMouseLeft（）}}}onMouseOver={（）=>{this.onMouseOver（）}}}样式={paper}>
{this.props.item.name}
{this.onDeleteClick（）}}style={{{backgroundColor:“黑色”，color:“白色”，marginLeft:70，overflow:“隐藏”}>Delete
会话组织者：{this.props.item.organizer}
会话主题：{this.props.item.subject}
创建日期：{this.props.item.creationDate}
)
}

在这种情况下，您需要安装另一个名为

react onclickoutside

根据需要分别制作两个组件，如

FullViewComponent

和

InnerButtonComponent

。使用

InnerButtonComponent

渲染视图。然后在您的
InnerButtonComponent.js中

import React from 'react';
import onClickOutside from 'react-onclickoutside';

class InnerButtonComponent extends React.Component {
   constructor(props) {
     super(props);

   }
   handleClickOutside (e) {
    // outside click staff here
    console.log(e);
  }

  render () {
    return (
       <div>....</div>
    );
  }
}
export default onClickOutside(InnerButtonComponent);

从“React”导入React；
从“react onClickOutside”导入onClickOutside；
类InnerButtonComponent扩展React.Component{
建造师（道具）{
超级（道具）；
}
外把手（e）{
//外面请点击这里
控制台日志（e）；
}
渲染（）{
返回(
....
);
}
}
导出默认onClickOutside（InnerButtonComponent）；

---

就这样。

只需将事件传递给

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>
    )
}

onClick（事件）{
event.stopPropagation（）；
this.props.onClick（this.props.item）
}
单击（事件）{
event.stopPropagation（）；
//做点什么
}
render（）{
返回(
这个.onClick（e）}>
///
点击（e）}>你的按钮
///
)
}

太好了！非常感谢。