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

这是我的密码

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>

类服务卡扩展组件{
建造师（道具）{
超级（道具）
此.state={
重定向：false，
}
}
render（）{
if（this.state.redirect）
返回
返回(
this.setState（{redirect:true}）className=“服务卡”>
{this.props.service.title}
{this.props.service.nbr_views}视图

我有一个className=“service card”的父div，当我单击时，所有组件都可以单击，他会将state redirect设置为true，他会将我重定向到service component

---

当我在className=“service card”的父div中单击className=“switch edit”的div时，我希望不执行重定向 我试着和裁判做出如下反应，但她没有像我想要的那样工作

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

componentDidMount（）{
document.addEventListener（'mousedown'，this.handleClick，false）；
}
组件将卸载（）{
document.removeEventListener（'mousedown'，this.handleClick，false）；
}
handleClick=（e）=>{
if（this.node.contains（e.target））{
返回控制台日志（“cliicked”）；
}
this.handleClickOutSide（）
}
handleClickOutSide=（）=>{
if（this.nodeg）{
this.setState（{redirect:true}）}
}
render（）{
log（this.props.service.layout_xml_模板，“rrrr”）
if（this.state.redirect）
返回
返回(
this.nodeg=node}className=“服务卡”>
{this.props.service.title}
{this.props.service.nbr_views}视图

this.node=node}>
)
}
}

---

如何让组件可单击expect div className=“switch edit”不要忘记，此div位于div className=“service card”中。

一个简单的解决方案是检查单击了哪个元素。 为此，您可以创建一个函数来验证单击了哪个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>
    )
  }
}

。。。
const handleClick=事件=>{
如果（event.target.className==='切换编辑'/*或任何您想要的*/）
return；//或执行其他操作。
};
render（）{
if（this.state.redirect）
返回
返回(
{this.props.service.title}
{this.props.service.nbr_views}视图

)
}
}

---

我希望这个简单的解决方案能对您有所帮助！

您可以使用

event.stoppropagation

，

---

在内部可单击元素处理程序上，事件将不会“上升”到其父级。

是否有可用的历史道具？在子onClick（e）中，将其称为：e.stopPropagation（）；