divでキーを選択するにはどうすればよいですか？ここでreactjs

Question

私はその親コン​​ポーネントは、受信したデータによって動的に生成され、このdiv要素を持っている：

  {Object.keys(this.state.cart.cart).map((key,i)=>{ 
       return(
           <div className="item" key={i} identifier="mat"> 
            <div className="carti"> 
             <input type="number" value={this.state.cart.cart[key].quantity} min="1"/> 
             <h4 className="generalDescription">{key}</h4> 
             <h4 className="cost">₦{Math.round(this.state.cart.cart[key].totalCost*100)/100}</h4> 
            </div> 
            <a className="cancelBtn" key={i} onClick={this.deleteDiv} >x</a> 
           </div>) 

      })} 

私はonClickイベントハンドラによって呼び出され、この機能を持っている：

deleteDiv(e){ 
     console.log(e.target.key); 
    } 

は今、私がしたいですこれまでXボタンをクリックしたときにキーの値を取得しますが、コンソールで取得する内容は未定義です。助けが必要です！

Answer 1

、keyは小道具があるとdoesnの」 DOM内の対応するノードの属性に変換します。

deleteDiv(index){ 
    console.log(index); 
} 
... 
<a className="cancelBtn" key={i} onClick={this.deleteDiv.bind(i)}>x</a> 
//or 
<a className="cancelBtn" key={i} onClick={() => this.deleteDiv(i)}>x</a> 

かさえ：

deleteDiv(e){ 
    console.log(e.target.dataset.key); 
} 
<a className="cancelBtn" key={i} data-key={i} onClick={this.deleteDiv}>x</a> 

Answer 2

あなたはイベントハンドラでインデックスを必要とするすべて、単に引数として関数に渡す場合：

<a className="cancelBtn" key={i} onClick={() => this.deleteDiv(i)}>x</a> 

とアンドリューが示唆したように、その後

deleteDiv(index) { 
    console.log(index); 
}