ReactJs:onClick 在 div 上執行一個函數，在這個 div 之外的 onClick 執行另一個函數

Question

這是我的代碼

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="switch-edit" 的 div 中單擊 className="service-card" 的父 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" 內

Answer 1

一個簡單的解決方案是檢查點擊了哪個元素。 為此，您可以創建一個函數來驗證單擊了哪個 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>
    )
  }
}

我希望這個簡單的解決方案對您有所幫助！

Answer 2

您可以使用event.stopPropagtion 查看 MDN 文檔，在您的內部可點擊元素處理程序上，然后該事件不會“上升”到它的父級。