Question

我有一个React组件，它会将一堆li元素附加到DOM。其中一些人点击了Eventlistener。我尝试在用户点击这些特殊li后使用event.currentTarget.removeEventListener('click', this.handleMouse) for that禁用eventlistener，但它无效。以下是代码的相关部分：

var DisplayList = React.createClass({

[...]

handleMouse: function(event){

    event.currentTarget.style.backgroundColor = 'white';

    this.props.changeCounts(-1); 

    event.currentTarget.removeEventListener('click', this.handleMouse); //NOT WORKING
  },

[...]

  render: function(){
    var self = this;
    return(
      <div id = "listing-boxes-wrapper">
          {

            this.props.sortedList.map(function(item, index){
              if (self.state.changedHabit.indexOf(item.habitid) > -1) {
                return  <li key={index} style={{backgroundColor: '#ccc'}} className = "text-center" onClick={self.handleMouse}>{item.description} 
                        </li>
              }else{
                return  <li key={index} className =" text-center">{item.description}
                        </li>
              }
            })
          }
      </div>
    )

已修改：已将this添加回handleMouse，但仍无效

Answer 1

reactjs使用Function.prototype.bind将上下文绑定到处理程序（否则this将是undefined）。

所以在幕后发生的事情就像：

element.addEventListener('click', this.handleMouse.bind(this));

所以，你可以看到它的另一个功能是添加到听众，而不是this.handleMouse。

所以在那之后 - 你无法删除它，因为它甚至没有附加。

react-way解决方案只是在没有处理程序的情况下再次重新呈现元素，以便反应分离处理程序本身。

反应中的

Relevant（？）代码：

/**
 * Binds a method to the component.
 *
 * @param {object} component Component whose method is going to be bound.
 * @param {function} method Method to be bound.
 * @return {function} The bound method.
 */
function bindAutoBindMethod(component, method) {
  var boundMethod = method.bind(component);
  if (__DEV__) {
    // stripped as irrelevant
  }
  return boundMethod;
}

/**
 * Binds all auto-bound methods in a component.
 *
 * @param {object} component Component whose method is going to be bound.
 */
function bindAutoBindMethods(component) {
  var pairs = component.__reactAutoBindPairs;
  for (var i = 0; i < pairs.length; i += 2) {
    var autoBindKey = pairs[i];
    var method = pairs[i + 1];
    component[autoBindKey] = bindAutoBindMethod(
      component,
      method
    );
  }
}

回调中的removeEventlistener无法正常工作

1 个答案: