Question

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

<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新手，想知道是否有简单的方法可以做到这一点。

Answer 1

请注意，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

单击子级<span>中的链接时，React获取父级<li>的类名

1 个答案: