处理好onClick on ReactJS

Question

I have a full view with an onClick handler and a button inside this view with its own onClick handler. I want the onclick bound to the view to fire when I click anywhere except on the button. I want the onclick bound to the button to fire only when the button is clicked.

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

Just pass the event to the onDelete handler and stop the propagation:

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

In this case, you need to install another npm module called react-onclickoutside Make separate two component like FullViewComponent as you want and InnerButtonComponent . render your view with InnerButtonComponent . Then in your
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);

that's it.