我希望能够在点击表格行时更改其背景颜色,并在点击另一行时恢复背景颜色。
我尝试了以下代码:
index.js
state = {
color: []
}
render(){
return (
<Table>
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>address</th>
</tr>
</thead>
<tbody className="tableHover">
{this.props.students.map((item, i) => {
return (
<tr key={i} onClick={this.changeColor(i)}>
<td>{item.name}</td>
<td>{item.age}</td>
<td>{item.address}</td>
</tr>
);
})}
</tbody>
</Table>
);
changeColor = (selectedRow) => e => {
if (selectedRow){
this.setState({color: 'blue'})
}
}
}
style.css
.tableHover :hover {
color: white;
background-color: blue;
}
预先感谢您!