Как получить значение кнопки onclick в list.item

Question

Я не могу получить значение кнопки при нажатии. Когда я запускаю console.log BikeID, ничего не происходит, и кнопка, кажется, не знает значения List.item. Я пытаюсь заставить кнопку понять, к какому идентификатору она "подключена".

Это для системы аренды, работающей под управлением 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) он принадлежит.

Answer 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).