Я пытаюсь создать таблицу, в которой будут отображаться сведения о продуктах, а в последнем столбце каждой строки будет кнопка покупки. В настоящее время проблема заключается в том, что когда я нажимаю кнопку «Купить», покупается каждый продукт в таблице. Любые идеи?

var TableRows = []

_.each(this.state.productids, (value, index) => {
  TableRows.push(
    <TableRow>
      <TableRowColumn>{this.web3.toDecimal(this.state.productids[index])}</TableRowColumn>
      <TableRowColumn>{this.web3.toUtf8(this.state.names[index])}</TableRowColumn>
      <TableRowColumn>{this.web3.toUtf8(this.state.descriptions[index])}</TableRowColumn>
      <TableRowColumn>{(this.web3.toDecimal(this.state.prices[index])) }</TableRowColumn>
      <TableRowColumn>{this.state.owners[index]}</TableRowColumn>
      <RaisedButton label='Buy' onClick={this.state.productContract.buyProduct.sendTransaction(this.state.productids[index], { from: this.web3.eth.accounts[1], value:this.state.prices[index], gas:2000000 })} primary />
    </TableRow>
  )
0
RaccoonPuddle 14 Мар 2018 в 20:55

1 ответ

Лучший ответ

Я сделал две вещи:

  1. Я использовал функцию _.map() вместо функции _.each(), потому что она быстрее и следует паттерну неизменности React.
  2. Вам не хватало элемента <TableRowColumn>, охватывающего ваш элемент <RaisedButton>, поэтому кнопка применяла (click) ко всей строке, а не только к элементу <RaisedButton>.
// Your code:
/* var TableRows = []

_.each(this.state.productids, (value, index) => {
  TableRows.push(
    <TableRow>
      <TableRowColumn>{this.web3.toDecimal(this.state.productids[index])}</TableRowColumn>
      <TableRowColumn>{this.web3.toUtf8(this.state.names[index])}</TableRowColumn>
      <TableRowColumn>{this.web3.toUtf8(this.state.descriptions[index])}</TableRowColumn>
      <TableRowColumn>{(this.web3.toDecimal(this.state.prices[index])) }</TableRowColumn>
      <TableRowColumn>{this.state.owners[index]}</TableRowColumn>
      <RaisedButton label='Buy' onClick={this.state.productContract.buyProduct.sendTransaction(this.state.productids[index], { from: this.web3.eth.accounts[1], value:this.state.prices[index], gas:2000000 })} primary />
    </TableRow>
  )*/
  
const TableRows = _.map(this.state.productids, (value, index) => {
  return <TableRow>
    <TableRowColumn>{this.web3.toDecimal(this.state.productids[index])}</TableRowColumn>
      <TableRowColumn>{this.web3.toUtf8(this.state.names[index])}</TableRowColumn>
      <TableRowColumn>{this.web3.toUtf8(this.state.descriptions[index])}</TableRowColumn>
      <TableRowColumn>{(this.web3.toDecimal(this.state.prices[index])) }</TableRowColumn>
      <TableRowColumn>{this.state.owners[index]}</TableRowColumn>
      <TableRowColumn>
        <RaisedButton label='Buy' onClick={() => this.state.productContract.buyProduct.sendTransaction(this.state.productids[index], { from: this.web3.eth.accounts[1], value:this.state.prices[index], gas:2000000 })} primary />
      </TableRowColumn>
    </TableRow>
});
0
th3n3wguy 15 Мар 2018 в 01:08