如何在Table.Row React语义UI上单击prop active = {true}来设置一行
听起来很简单,但我没有找到一种方法。在文档中,我什么也没说。
我尝试过这种方法,但是没有用,
selectRow(key){
let rowStatus = this.state.rowStatus[];
for(let i in rowStatus){
rowStatus[i] = false;
}
rowStatus[key] = true;
this.setState({rowStatus:rowStatus});
}
renderRowTable(data){
let row = [];
let rowStatus = [];
for(let i in data){
rowStatus.push(false);
row.push(
<Table.Row key={i} active={this.state.rowStatus[i]} onClick={()=>{this.selectRow(i)}}>
<Table.Cell title={data[i].code}>{data[i].code}</Table.Cell>
<Table.Cell title={data[i].date}>{data[i].date}</Table.Cell>
</Table.Row>
);
}
this.setState({
row:row,
rowStatus:rowStatus
});
}
render() {
return (
<div>
<Table celled fixed singleLine compact size="small" sortable selectable>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Code</Table.HeaderCell>
<Table.HeaderCell>Date</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>{this.state.row}</Table.Body>
</div>
)
}
您可以保持activeRowId的状态,并在onClick行上更改其值。
我像这样严重重构了您的代码:
import React, { Component } from "react";
import { Table } from "semantic-ui-react";
class App extends Component {
state = {
data: [
{ id: 1, code: "code1", date: "date1" },
{ id: 2, code: "code2", date: "date2" },
{ id: 3, code: "code3", date: "date3" }
],
activeRowId: null
};
setActiveRow(id) {
this.setState({
activeRowId: id
});
}
renderRowTable() {
let rows = this.state.data.map(item => {
return (
<Table.Row
key={item.id}
active={item.id === this.state.activeRowId}
onClick={() => {
this.setActiveRow(item.id);
}}
>
<Table.Cell title={item.code}>{item.code}</Table.Cell>
<Table.Cell title={item.date}>{item.date}</Table.Cell>
</Table.Row>
);
});
return rows;
}
render() {
return (
<div>
<Table celled fixed singleLine compact size="small" sortable selectable>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Code</Table.HeaderCell>
<Table.HeaderCell>Date</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>{this.renderRowTable()}</Table.Body>
</Table>
</div>
);
}
}
export default App;