我有一个树菜单组件,它输出以下格式:

<li class="rct-node rct-node-parent rct-node-collapsed">
<span class="rct-title">192.168.1.61</span></span></span></li>


单击“ rct-title”值时,需要获取li的类,以便在类为“ rct-node”的情况下运行条件语句。我是JS新手,想知道是否有简单的方法可以做到这一点。

最佳答案

请注意,class对于React(jsx)无效,应为className

话虽如此,您可以使用e.target.parentElement.className

像这样:

class App extends Component {
  handleGetClassName = e => {
    console.log(e.target.parentElement.className);
  };
  render() {
    return (
      <div>
        <li
          className="rct-node rct-node-parent rct-node-collapsed"
          onClick={this.handleGetClassName}
        >
          <span className="rct-title">192.168.1.61</span>
        </li>
      </div>
    );
  }
}


它将console.log字符串rct-node rct-node-parent rct-node-collapsed

更新:

如果只需要第一个className,则可以执行以下操作:

  handleGetClassName = e => {
    const className = e.target.parentElement.className.split(' ')[0];
    console.log(className);
  };


现在它只会给您rct-node

关于javascript - 单击子级<span>中的链接时,React获取父级<li>的类名,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53243575/

10-13 03:35