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分配给名称为bind的id onClick函数，只要点击任何按钮，它就会将该ID传递给{{1}功能。

像这样：

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

注意：此处不需要<{strong}>绑定handleRegionClick(id){ console.log(id); }，因为我们正在使用handleRegionClick onClick并正常调用arrow function。

Answer 2

你的问题对我来说很奇怪。你可以简单地做到。

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

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

Answer 3

不要使用e.toElement。而是在生成按钮时添加事件侦听器。如果您这样做，那么您可以通过e.toElement.name访问点击的元素，并使用item.id访问其名称属性（似乎您的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); }); }位于名称属性中）。

{{1}}

Answer 4

也许尝试将that.handleRegionClick（）绑定到此？

that.handleRegionClick.bind(that)

然后您应该可以访问e.target

检索单击了哪个按钮React / Material

4 个答案: