Javascript:-如何将表中的值传递给onClick处理程序以实现删除功能

import React from 'react';





export default class TradeTable extends React.Component {

	delete = (event) => {
		event.preventDefault();
		
		console.log(event.target.value+"wdccerfec")
	
		//I just need the value of table item id 


	}
	render() {


		var tableData = this.props.store.arr;



		return <div className="panel panel-default">
	
			<div className="panel-body tradeComponent div-background table-responsive">
				<table className="table table-striped tb div-lightbackground">

					<thead className="thead-dark ">
						<tr>
							<th>Commodity</th>
							<th>Date</th>
							<th>Side</th>
							<th>Qty (MT)</th>
							<th>Price (MT)</th>
							<th>CounterParty</th>
							<th>Location</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
                 //Trade data is an array of objects
						{
							tableData.map(tableItem => {
								return (
									<tr>
										<td>{tableItem.tradeDate}</td>
										<td>{tableItem.commodity}</td>
										<td>{tableItem.side}</td>
										<td>{tableItem.quantity}</td>
										<td>{tableItem.price}</td>
										<td>{tableItem.counterparty}</td>
										<td>{tableItem.location}</td>
										<td>{tableItem.id}</td>
										<td>

											

<button type='submit' className="btn btn-primary table-style" value={tableItem.id} onClick={this.delete}  >
    												<span className="glyphicon glyphicon-trash" aria-hidden="true"></span>
											</button>

										</td>
									</tr>)
							})
						}

					</tbody>
				</table>
			</div>
		</div>
	}
}