如何在Reactjs中点击编辑按钮时获取id

Question

当在某一行上单击按钮时，我找不到获取id的方法。行是通过填写add表单在map函数中添加的。我希望id属性具有我传递并存储在localStorage中的对象的id。然后我想获取id并在控制台上的editStudent函数中打印它。

const Admin = () =>{
const classes = useStyle();
const history = useHistory();
const[token, setToken] = React.useState(localStorage.getItem('token'));
const[name, setName] = React.useState(localStorage.getItem('Admin'))
let student = JSON.parse(localStorage.getItem('student'))
useEffect(()=>{
if(token === null){
return history.push('/')
}else if(student === null){
return history.push('/admin')
}
},[token])

const rows = []
if(student === null){
// return history.push('/admin')
}
else{
for(let i = 0; i < student.length ; i++){
rows.push(student[i])
}
}
const editStudent = (id)=>{

console.log(id);
// localStorage.setItem('uniqID',localStorage.getItem('id'))
// return history.push('/admin/edit')
}
const LogOut = () =>{
localStorage.removeItem('token')
setToken(null)
setName('');
}
const Add = () => {
history.push('/admin/add')
}
return(
<div>
<AppBar position="static" className = {classes.Appbar}>
<Toolbar className = {classes.Toolbar}>
<Typography variant="h6">{name} <span style={{color: '#df1b39'}}><strong>Dashboard</strong></span></Typography>
<Button color="secondary" className = {classes.button} variant = "contained" onClick={LogOut}>Logout</Button>
</Toolbar>
</AppBar>
<div>
<div className = {classes.head}>
<h1>Student Details</h1>
<Button onClick={Add}><AddCircleIcon fontSize = 'large' color = 'primary'/>Add Student</Button>
</div>
<Grid container spacing={3}>
<Grid item xs={12}>
<TableContainer component = {Paper}>
<Table>
<TableHead>
<TableRow>
<StyleTableCell>#</StyleTableCell>
<StyleTableCell>Roll Number</StyleTableCell>
<StyleTableCell>Full Name</StyleTableCell>
<StyleTableCell>Father's Name</StyleTableCell>
<StyleTableCell>Phone Number</StyleTableCell>
<StyleTableCell>Email address</StyleTableCell>
<StyleTableCell>Semester #</StyleTableCell>
<StyleTableCell>CGPA</StyleTableCell>
<StyleTableCell align='right'>Action</StyleTableCell>
</TableRow>
</TableHead>
<TableBody>
{
rows.map((row,i) =>{
return <TableRow>
<TableCell>{i+1}</TableCell>
<TableCell>{row.Rnumber}</TableCell>
<TableCell>{row.name}</TableCell>
<TableCell>{row.Fname}</TableCell>
<TableCell>{row.Pnumber}</TableCell>
<TableCell>{row.email}</TableCell>
<TableCell>{row.semester}</TableCell>
<TableCell>{row.CGPA}</TableCell>
<TableCell align = 'right'>
<span>
<Button id='1' variant = 'outlined' onClick={editStudent(this.id)} style={{color : 'yellow', border : '1px solid yellow', marginRight : '10px'}}>
Edit
</Button>
<Button variant = 'outlined' style={{color : 'red', border : '1px solid red' }}>
Delete
</Button>
</span>
</TableCell>
</TableRow>
})}
</TableBody>
</Table>
</TableContainer>
</Grid>
</Grid>
</div>
</div>
)
}
export default Admin;

Answer 1

您可以从event.target或event.currentTarget获取id

const editStudent = (event)=>{
console.log(event.target.id); // or try event.currentTarget.id
// localStorage.setItem('uniqID',localStorage.getItem('id'))
// return history.push('/admin/edit')
}

<Button id='1' onClick={editStudent}>
Edit
</Button>