コールバックのremoveEventListenerが機能しない

Question

DOMにli要素の束を添付するReactコンポーネントがあります。そしてそれらの一部にはクリックイベントリスナーがあります。ユーザーがliという特殊なものをクリックした後にイベントリスナーを無効にしようとしていますが、event.currentTarget.removeEventListener('click', this.handleMouse) for thatを使用していますが、動作していません。ここでは、コードの関連部分です：

編集した

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

：バックhandleMouseにthisを追加しましたが、それでも

Answer 1

reactjs作業イマイチ（特にthisはundefinedだろう）ハンドラにコンテキストをバインドするFunction.prototype.bindを使用しています。

だから何ボンネットの下に起こることのようなものです：あなたはそれがリスナーないthis.handleMouseに追加し、別の機能です見ることができるように

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

、。

その後、添付されていないので、削除することはできません。

リアクションウェイの解決策は、ハンドラを使わずに再度要素を再描画するだけで、反応がハンドラ自体を切り離すことになります。

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