どのボタンがクリックされたかを取得するReact/Material

Question

私はいくつかの動的に生成されたマテリアルUIボタンを持っていて、どれがクリックされたのかを知りたいと思います（下記のname属性を取得しましょう）。 これをどのように解決できますか？基本的には、クリックされたボタンの属性を取得したい。 はここにいくつかのコード

{that.state.items.map(function (item) { 
     return (<div key = {item.id}> 
       <FlatButton label={item.regionName} name = {item.id} primary={true} onClick={that.handleRegionClick}></FlatButton> 
       </div> 
      ) 
    })}  


handleRegionClick(e) 
{ 
     console.log(e.target.name) // This prints undefined 
     // If I could get here the _item.id_ which I assigned to _name_ I would be fine. 
} 

PSです。私もコンストラクタでこれを持っています

this.handleRegionClick = this.handleRegionClick.bind(this); 

Answer 1

にアクセスすることができるはずですそのIDをclickファンクションに渡します。

let a = [{id:1}, {id:2}, {id:3}]; 

a.map(item => { 

    return <FlatButton label={item.regionName} primary={true} onClick={() => this.handleRegionClick(item.id)}></FlatButton> 

}) 

handleRegionClick機能：

handleRegionClick(id){ 
    console.log(id); 
} 

注：ここでは、onClickのでarrow functionを使用していて、通常はhandleRegionClickを呼び出すためがhandleRegionClickの結合が、ここで必要とされていない。このよう

。

Answer 2

これにthat.handleRegionClick（）をバインドしようとしていることがありますか？

that.handleRegionClick.bind(that)

その後、ボタンのいずれかがクリックされるたびに、onClick機能で、代わりに名前にIDを割り当てるので、bindそのIDを一つのことを行うことができますe.target

Answer 3

あなたの質問は私には奇妙に見えます。あなたは単にそれを行うことができます。

<FlatButton label={item.regionName} name={item.id} primary={true} onClick={that.handleRegionClick.bind(this, item.id)}></FlatButton> 

handleRegionClick(itemId){ 
    console.log(itemId) 
} 

Answer 4

は、このためにonClickを使用しないでください。代わりに、ボタンを生成するときに、イベントリスナーを追加します。それを行うと、クリックした要素にe.toElementでアクセスし、e.toElement.nameという名前のプロパティにアクセスできます（item.idがnameプロパティにあるようです）。

for (...) { // however many buttons you generate 
    var x = generateButtonSomehow(); // make sure it returns the DOM element 
    x.addEventListener('click', function(e) { 
     console.log(e.toElement.name); 
    }); 
}