javascript - 无法使用 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，但我似乎无法用 pure 解决它javascript。

标签： javascriptjqueryreactjs

Answer 1

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

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

在 React 中最好不要直接修改 DOM，你应该使用 React 的“方式”，比如：

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

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