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

【问题标题】：ReactJs:onClick on a div execute a function and onClick outside of this div execute another functionReactJs:onClick 在一个 div 上执行一个函数，在这个 div 之外的 onClick 执行另一个函数
【发布时间】：2020-04-22 01:47:16
【问题描述】：

这是我的代码

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>

我有 className="service-card" 的父 div，当我单击时，所有组件都是可点击的，他会将状态重定向设置为 true，他会将我重定向到服务组件

我希望当我在具有 className="service-card" 的父 div 中单击带有 className="switch-edit" 的 div 时不执行重定向

我尝试使用下面的 Ref 反应，但她并没有像我想要的那样工作

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

我怎样才能让组件点击期望 div className="switch-edit" 不要忘记这个 div 在 div className="service-card" 内

【问题讨论】：

你有可用的历史道具吗？
在子 onClick(e) 中调用这个：e.stopPropagation();

标签： javascript reactjs

【解决方案1】：

你可以使用event.stopPropagtionsee the MDN doc，在您的内部可点击元素处理程序上，则事件不会“上升”到它的父级。

【讨论】：

【解决方案2】：

一个简单的解决方案是检查点击了哪个元素。为此，您可以创建一个函数来验证单击了哪个 div，例如：

...

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

希望这个简单的解决方案能帮到你！

【讨论】：