無法使用 e.target 獲取父 div 類列表

Question

我似乎知道問題是什么，但我無法解決，所以這是我的代碼

<div className="reason" onClick={openTab}>
      <div className="reason-title">
            <div className="icon" >
                 <i className="fa fa-angle-down" aria-hidden="true"></i>
            </div>
            <span>title</span>
      </div>
</div>

和我寫的java腳本

const openTab = (e) => {
      if (e.target.classList.contains("active")) {
          e.target.classList.remove("active")
      } else {
          e.target.classList.add("active")

      }
}

所以問題是每當我在子divs沒有占用的地方單擊父 div 就可以了，但是例如，當我單擊標題時，它會檢查該元素的classList ，而我只想檢查父 div ，在這種情況下原因是div。 我不想使用jquery但我似乎無法用純javascript解決它。

Answer 1

您可能需要event.currentTarget或event.parentNode ：

e.currentTarget.classList.contains("active")

在 React 中最好不要直接修改 DOM，您應該使用 React “方式”，例如：

const openTab = (e) => {
  active = active ? false : true
}

className={active ? 'active' : ''}