检索在 React 中单击了哪个按钮

Question

我有几个动态生成的 material 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

也许尝试将 that.handleRegionClick() 绑定到此？

that.handleRegionClick.bind(that)

那么你应该可以访问e.target

Answer 2

你可以做一件事，而不是将 id 分配给 name，bind 该 id 具有 onClick 处理函数。每当单击任何按钮时，它都会将该 id 传递给处理函数。

像这样：

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

a.map(item => {

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

})

handleRegionClick 函数:

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

注意：这里不需要绑定handleRegionClick，因为这里我们使用的是arrow function和onClick，正常调用handleRegionClick。

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 在名称中属性).

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

检索在 React 中单击了哪个按钮

Retrieve which button was clicked in React

javascript

reactjs

material-ui