ReactJs:onClick 在 div 上执行一个函数，在这个 div 之外的 onClick 执行另一个函数

Question

this is my code

class ServiceCard extends Component {
  constructor(props) {
    super(props)
    this.state = {
      redirect: false,

    }
}
  render() {
    if (this.state.redirect)
      return <Redirect to={'/service/' + this.props.service.id}></Redirect>

    return (
<div onClick={() => this.setState({ redirect: true })} className="service-card">
        <div style={{ color: '#' + this.props.service.title_color }} className="service-name">
          {this.props.service.title}
        </div>
        <div className="service-Edit" >
          <div className="service-info">
            <ReactSVG src="/img/services/vue.svg" />
            <p>{this.props.service.nbr_views} Views</p>
          </div>
          <div className="edit_Button">
            <div className="edit_image">

              <Link to={'/edit/service/' + this.props.service.id} >
                <img src="/img/ui/editService.png" style={{ width: "32px" }} />
              </Link>
            </div>
            <div className="switch-edit" >

              <Switch id={this.props.id} check={this.props.check}></Switch>
            </div>
          </div>
        </div>
      </div>

i have the parent div with className="service-card" where all the component is clickable when i click he will setstate redirect to true and he will redirect me to service component

---

i want when i click in the div with className="switch-edit" inside the parent div with className="service-card" no redirection execute

i try with the Ref react as below but she doesn't work like i want

 componentDidMount() {
    document.addEventListener('mousedown', this.handleClick , false);
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClick ,false);
  }

  handleClick=(e)=>{
if(this.node.contains(e.target)){
  return console.log("cliiicked");
}
  this.handleClickOutSide()

  }
  handleClickOutSide=()=>{
    if(this.nodeg){
    this.setState({ redirect: true })}
  }
  render() {
    console.log(this.props.service.layout_xml_template, "rrrr")
    if (this.state.redirect)
      return <Redirect to={'/service/' + this.props.service.id}></Redirect>

    return (
      <div   ref={node =>this.nodeg=node} className="service-card">
        <div style={{ color: '#' + this.props.service.title_color }} className="service-name">
          {this.props.service.title}
        </div>
        <div className="service-Edit" >
          <div className="service-info">
            <ReactSVG src="/img/services/vue.svg" />
            <p>{this.props.service.nbr_views} Views</p>
          </div>
          <div className="edit_Button">
            <div className="edit_image">

              <Link to={'/edit/service/' + this.props.service.id} >
                <img src="/img/ui/editService.png" style={{ width: "32px" }} />
              </Link>
            </div>
            <div className="switch-edit"  ref={node =>this.node=node}>

              <Switch id={this.props.id} check={this.props.check}></Switch>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

how can i let the component clickable expect div className="switch-edit" don't forget that this div is inside the div className="service-card"

Answer 1

A simple solution for this is check to which element is clicked. To do that, you can create a function that verify which div is clicked, for example :

...

  const handleClick = event => {
    if (event.target.className === 'switch-edit' /* Or whatever you want */)
      return; // Or make another action.
  };

  render() {
    if (this.state.redirect)
      return <Redirect to={'/service/' + this.props.service.id}></Redirect>

    return (
      <div className="service-card" onClick={handleClick}>
        <div style={{ color: '#' + this.props.service.title_color }} className="service-name">
          {this.props.service.title}
        </div>
        <div className="service-Edit" >
          <div className="service-info">
            <ReactSVG src="/img/services/vue.svg" />
            <p>{this.props.service.nbr_views} Views</p>
          </div>
          <div className="edit_Button">
            <div className="edit_image">

              <Link to={'/edit/service/' + this.props.service.id} >
                <img src="/img/ui/editService.png" style={{ width: "32px" }} />
              </Link>
            </div>
            <div className="switch-edit">
              <Switch id={this.props.id} check={this.props.check}></Switch>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

I hope that this simple solution will help you !

Answer 2

您可以使用event.stopPropagtion 查看 MDN 文档，在您的内部可点击元素处理程序上，然后该事件不会“上升”到它的父级。