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

Question

在 onClick 上，我尝试调用删除函数。我需要的是 tableItem id 的值，我可以在 UI 中看到该值，但无法访问它以删除特定行。场景是:单击->删除 fn->使用 id->删除该行。 我只需要 id 即可实现这一点。但我无法引入删除功能。

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

Answer 1

您需要通过 onClick 按钮传递 id

onClick={this.delete.bind(this, tableItem.id)}

然后

delete = (id) => {

    console.log('Clicked item', id)
}