Material UIチップのクロスボタン/削除ボタンが機能しない

Question

Material UI Chipsをマッピングしていますが、クロスボタンが表示されず、クリックすることも、onTouchTapイベントを使用することもできません。

ここでマッピング

{mapping.map(chipMap => { 
      return (
      <div> 
       <Chip 
       key={chipMap._id} 
       onRequestDelete={this.handleRequestDelete(chipMap) 
       )} 
       onTouchTap={this.handleTouchTap(chipMap)} 
       style={styles.chip} 
       > 
       <Avatar src={chipMap.picture} /> 
       {chipMap.name} 
       </Chip> 
      </div> 
     ); 
     })}; 

は私がthis.handleTouchTap(chipMap).bind(this)を使用する場合、それはコンソールに未定義与えます。

handleRequestDelete = chipMap => { 
    alert(chipMap.name); 
    }; 

    handleTouchTap = chipMap => { 
     alert(chipMap.name); 
    }; 

私は間違いなくこのバインディングに問題があると確信していますが、私はそれを理解できません。

私はまた、コンストラクタでこの

this.handleRequestDelete = this.handleRequestDelete.bind(this); 

をしましたが、無駄に。

チップ正確なアバターの画像と名前と共に表示されますかが、閉じるボタンが表示されますされませんし、私もその名を警告する各チップをクリックしてカント、IDや絵

Answer 1

あなたが結合されている方法方法が正しくない、あなたはその中でも、追加のパラメータを渡したいので、このようにそれを書く：

onRequestDelete={this.handleRequestDelete.bind(this,chipMap)} 

handleRequestDelete(chipMap){ 
    console.log(chipMap); 
} 

onTouchTap={this.handleTouchTap.bind(this, chipMap)} 

handleTouchTap(chipMap){ 
    console.log(chipMap); 
} 

としてMDN DOCあたり：

syntax: fun.bind(thisArg[, arg1[, arg2[, ...]]]) 

bind（）メソッドは、呼び出されたときに、 このキーワードが指定された値に設定され、新しい関数が呼び出されたときに指定されたシーケンスよりも先に の引数を持つ新しい関数を作成します。

まずthisArgを渡す：

値は、結合関数が呼び出されるターゲット関数このパラメータとして渡されます。

はその後...、すべての引数、引数1、ARG2を渡す：

引数は、ターゲット関数を呼び出すときにバインドされた関数に渡された引数に付加します。