如何在 list.item 中获取按钮 onclick 的值答案

【问题标题】：How to get value of button onclick in list.item如何在 list.item 中获取按钮 onclick 的值
【发布时间】：2019-03-23 18:22:51
【问题描述】：

点击时我无法获得按钮的价值。当我 console.log BikeID 没有任何反应，并且按钮似乎不知道 List.item 的值。我试图让按钮了解它“连接”到的 ID。

这是一个出租系统，运行 MySQL 和 PHP。我尝试了不同的按钮、输入和变体。

...

<List>
{this.bikes.map(bike => (
   <List.Item key={bike.BikeID}>
       {bike.BikeID} - {bike.Status} , {bike.Information}''
         <Button.Success value={bike.BikeID} onClick={e =>(this.BikeID = e.target.BikeID)} onChange={this.move}> Move to Status 1 </Button.Success>
          </List.Item>
        ))}
      </List>

...

move() {
  console.log(this.BikeID);
  bikeService.moveBike(this.BikeID, bikes => {
  this.bikes = bikes;
});
  setTimeout(() => {}, 250);
}

...

预期结果是按钮可以检测到它属于哪个 List.Item（以及哪个 BikeID）。

【问题讨论】：

我想你在找this.BikeID = bike.BikeID
我应该把它放在哪里？
onclick 而不是this.BikeID = e.target.BikeID
当我保留“e”并且只更改目标时，console.log 说“无法读取未定义的属性 'BikeID'”。当我只有 {this.BikeID = bike.BikeID} 时，我收到一条警告“预期'onClick'。???

标签： javascript reactjs list button onclick

【解决方案1】：

有不同的解决方案具有不同的优缺点。它还取决于您的 Button.Success 组件。

我不确定您对 onChange 的想法以及 Button 组件如何处理点击

//add a constructor to your component
constructor(props) {
  super(props);
  //add this context to the move function to access this.bikes
  this.move = this.move.bind(this);
}
move(e) {
  let bikeId = e.target.value;
  let bikes = this.bikes;
  // ... do whatever you have to do with bikeId and bikes
}

render() {
  //...
  <Button.Success value={bike.BikeID} onClick={this.move}> Move to Status 1 </Button.Success>
  //...
}

其他解决方案可以是：Button 组件可以读取 e.target.value 并将其传递回 onClick 方法（this.move）。

【讨论】：