Question

我想检查特定元素在被点击时是否具有指定的类。我知道你可以绑定一个将setScreen(new Menu)传递给处理程序的点击处理程序。我的想法是让<div class="container"> <div class="row"> <div class="col-sm-1">Column 1</div> <div class="col-sm-2">Column 2</div> <div class="col-sm-1">Column 3</div> </div> <div ng-repeat="Item in Items"> <div class="row"> <div class="col-sm-2">{{Item.Field1}</div> <div class="col-sm-4">{{Item.Field2}}</div> <div class="col-sm-6">{{Item.Field3}}</div> </div> </div> </div>看看它是否有类，但我得到以下错误。

e.target.classList.indexOf不是函数

我认为这是因为e.target是类似数组的对象，而不是实际的数组。有没有更简单的方法从React中的被点击元素获取类列表而不执行所有＆＃34;切片调用＆＃34;魔法？

e.target.classList.indexOf(this.myClass) > -1

如何从＆＃34; target＆＃34;中获取一系列类？ React的事件系统中点击的元素？

Answer 1

Element.classList提供contains()功能，可以解决您的问题：

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

Docs

另请注意，this可能与您在事件处理程序中的不一样，除非您明确地绑定了函数上下文，例如使用bind()。

Answer 2

您可以使用.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>

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

2 个答案: