我想在单击时将表格行的背景色更改为另一行单击时的原色。
我尝试过这样的事情:
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;
}
谢谢!
答案 0 :(得分:0)
您可以将索引设置为您的状态,如果索引等于设置的值,则可以像这样添加颜色:
class YourComponent extends Component {
state = {
isActive: null
};
toggleActive = i => {
//Remove the if statement if you don't want to unselect an already selected item
if (i === this.state.isActive) {
this.setState({
isActive: null
});
} else {
this.setState({
isActive: i
});
}
};
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
style={
this.state.isActive === i
? { background: 'green' }
: { background: 'yellow' }
}
key={i}
onClick={() => this.toggleActive(i)}
>
<td>{item.name}</td>
<td>{item.age}</td>
<td>{item.address}</td>
</tr>
);
})}
</tbody>
</Table>
);
}
}
答案 1 :(得分:0)
您可以在selectedRow
中保留一个state
,然后根据匹配的索引将一个类名添加到该行中。
className={this.state.selectedRow === i ? "tableSelected" : "" }
下面的完整工作代码
class App extends React.Component {
state = {
selectedRow: -1
};
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)} className={this.state.selectedRow === i ? "tableSelected" : "" }>
<td>{item.name}</td>
<td>{item.age}</td>
<td>{item.address}</td>
</tr>
);
})}
</tbody>
</table>
);
}
changeColor = selectedRow => e => {
if (selectedRow !== undefined) {
this.setState({ selectedRow });
}
};
}
ReactDOM.render(<App students={[{name: "a"}, {name: "b"}]}/>, document.getElementById("app"));
.tableHover :hover {
color: white;
background-color: blue;
}
.tableSelected {
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>