[英]How make table row clickable?
import React from 'react'
import './myform.css'
const Emp=()=>{
const players=[
{
id: 1,
fullName: 'Employee 1',
email:'example1@mail.com',
joiningdate: '05/08/2020',
},
{
id: 2,
fullName: 'Employee 2',
email:'example2@mail.com',
},
{
id: 3,
fullName: 'Employee 3',
email:'example3@mail.com',
joiningdate: '10/08/2020'
},
{
id: 4,
fullName: 'Employee 4',
email:'example4@mail.com',
joiningdate: '05/08/2020'
},
]
/* I want to make row clickable and when it clicked information
from whole row is display on other page
I trying so much to make row clickable but it fails,
I got error "rowSelect() is undefined!!!" */
rowSelect=(event)=>{
console.log(event);
}
const renderPlayer=(player, index)=>{
return(
<tr key={index} onClick={this.rowSelect}>
<td>{player.id}</td>
<td>{player.fullName}</td>
<td>{player.email}</td>
<td>{player.joiningdate}</td>
</tr>
)
}
> //return data into table format on UI
return(
<div className='emp'>
<table className='border'>
<thead>
<tr >
<th>Id</th>
<th>Full Name</th>
<th>Email</th>
<th>Joining Date</th>
</tr>
</thead>
<tbody>
{players.map(renderPlayer)}
</tbody>
</table>
</div>
)
}
export default Emp
由于这是一个功能组件,您需要将 function 声明为
function rowSelect(event) {
}
或者
const rowSelect = event => {
}
然后像这样在你的 onClick 中调用它
<tr key={index} onClick={rowSelect}>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.