单击时检查类是否存在（React）

IT技术 javascript reactjs
2021-04-28 22:41:51

我想检查某个特定元素在单击时是否具有指定的类。我知道你可以绑定一个传递e.target给处理程序的点击处理程序。我的想法是去e.target.classList.indexOf(this.myClass) > -1看看它是否有类，但我收到以下错误。

e.target.classList.indexOf 不是函数

我认为这是因为classList是一个类似数组的对象，而不是实际的数组。有没有一种更简单的方法可以从 React 中单击的元素获取类列表，而无需执行所有“切片调用”魔法？

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.myClass = 'my-class';
    }

    handleClick(e) {
        // check if e.target class has this.myClass
        if (/* logic */) {
            // perform action
        }
    }

    render() {
        return <div onClick={this.handleClick.bind(this)} className={this.myClass + ' other-class'}>
            <div>My Component</div>
        </div>
    }

}

如何从 React 事件系统中单击的“目标”元素获取类数组？

2个回答

Element.classList提供了一个contains()可以解决您的问题的函数：

e.target.classList.contains(this.myClass)

文档

另请注意this，除非您显式绑定函数上下文，例如使用bind().

您可以使用.contains方法。，

contains( String ) 检查元素的类属性中是否存在指定的类值。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myClass = 'my-class';
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    console.log(e.currentTarget.classList.contains(this.myClass))
  }

  render() {
    return <div 
      className={this.myClass + ' other-class'} 
      onClick={this.handleClick}
    >
      <div>My Component</div>
    </div>
  }
}


ReactDOM.render(
  <MyComponent name="World" />,
  document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

其它你可能感兴趣的问题
上一篇create-react-app 中的 src/images 文件夹 下一篇使用 React-router-component 从 ajax 调用成功后如何重定向？