removeEventlistener geri aramada çalışmıyor

Question

DOM'a li öğesinin bir demetini ekleyeceği bir React bileşenim var. Ve bunlardan bazılarında tıklatma Eventlistener var. Kullanıcı bu özel li, event.currentTarget.removeEventListener('click', this.handleMouse) for that kullanarak tıkladıktan sonra eventlistener'ı devre dışı bırakmaya çalışıyorum, ancak çalışmıyor.

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> 
    ) 

düzenlendi:: Burada kodun ilgili bölümü olan handleMouse geri this eklendi, ama yine de işleyici bağlam bağlama Function.prototype.bind kullanır

Answer 1

reactjs çalışma isnt (Aksi thisundefined olacaktır). Eğer başka bir fonksiyon dinleyici değil this.handleMouse eklenen var gördüğünüz gibi, Yani

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

:

Peki başlık altında olur gibi bir şeydir.

Bundan sonra - takılı olmadığından, onu kaldıramazsınız. Tepkime yolu çözeltisi, işleyiciden bir kez daha öğütücünün yeniden işlenmesi, böylece tepkimenin işleyicinin kendisinden ayrılması için olurdu. (?) Içinde

Relevant kod tepki:

/** 
* 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 
    ); 
    } 
}