Я использую Material UI для создания таблицы в реакции.Данные отображаются и сортируются правильно, когда я нажимаю на заголовок каждого столбца в таблице.Однако я хочу, чтобы активный атрибут становился активным только для этого конкретного столбца, когда я щелкаю по нему.Теперь он работает так, что все заголовки столбцов чередуются между активными и не активными (true / false).У кого-нибудь есть идея предотвратить активацию всех остальных столбцов, когда я просто нажимаю на определенный?Спасибо.
import React, { Component } from "react";
import PropTypes from 'prop-types';
import withStyles from '@material-ui/core/styles/withStyles';
import { withRouter } from "react-router-dom";
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import TableSortLabel from '@material-ui/core/TableSortLabel';
import Paper from '@material-ui/core/Paper';
import CssBaseline from '@material-ui/core/CssBaseline';
import axios from "axios";
const NumberFormat = require('react-number-format');
const styles = theme => ({
main: {
width: 'auto',
display: 'block',
marginLeft: theme.spacing.unit * 3,
marginRight: theme.spacing.unit * 3,
[theme.breakpoints.up(500 + theme.spacing.unit * 3 * 2)]: {
width: 1000,
marginLeft: 'auto',
marginRight: 'auto',
},
},
paper: {
marginTop: theme.spacing.unit * 16,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px`,
},
table: {
minWidth: 950,
},
tableWrapper: {
overflowX: 'auto',
},
});
const headRows = [
{ id: 'market_cap_rank', numeric: true, disablePadding: true, label: '#' },
{ id: 'name', numeric: false, disablePadding: false, label: 'Name' },
{ id: 'current_price', numeric: true, disablePadding: false, label: 'Price' },
{ id: 'price_change_percentage_24h', numeric: true, disablePadding: false, label: 'Change (24h)' },
{ id: 'market_cap', numeric: true, disablePadding: false, label: 'Market Cap' },
{ id: 'high_24h', numeric: true, disablePadding: false, label: '24H High' },
{ id: 'total_volume', numeric: true, disablePadding: false, label: 'Volume' },
];
class Test extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
direction: 'asc',
arrow: true,
active: false
}
this.sortByNumericValue = this.sortByNumericValue.bind(this);
this.sortByStringValue = this.sortByStringValue.bind(this);
}
componentDidMount() {
axios.get('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1&sparkline=false')
.then(res => {
const data = res.data;
console.log(data);
this.setState({ data: data })
})
}
sortByNumericValue = (key) => {
const { data } = this.state;
this.setState(prevState => ({
data: data.sort((a, b) => (
this.state.direction[key] === 'asc'
?
parseFloat(a[key]) - parseFloat(b[key])
: parseFloat(b[key]) - parseFloat(a[key])
)),
direction: {
[key]: this.state.direction[key] === 'asc'
? 'desc'
: 'asc'
},
arrow : !prevState.arrow,
active : !prevState.active
}));
}
sortByStringValue = (key) => {
const { data } = this.state;
data: data.sort((a, b) => {
const asc = this.state.direction[key] === 'asc';
if (a[key] > b[key]) {
return asc ? -1 : 1;
} else if (a[key] < b[key]) {
return asc ? 1 : -1;
} else {
return 0;
}
}),
this.setState(prevState => ({
data: data,
direction: {
[key]: this.state.direction[key] === 'asc'
? 'desc'
: 'asc'
},
arrow : !prevState.arrow,
active : !prevState.active
}));
}
render() {
const { classes } = this.props;
return (
<main className={classes.main}>
<CssBaseline />
<Paper className={classes.paper}>
<div className={classes.tableWrapper}>
<Table className={classes.table}>
<TableHead>
<TableRow>
{headRows.map(row => (
<TableCell
key={row.id}
padding={row.disablePadding ? 'none' : 'default'}
>
<TableSortLabel
active={this.state.active}
direction={this.state.arrow ? 'asc' : 'desc'}
onClick = {() => row.id === "name" || row.id === "market_cap_rank" ? this.sortByStringValue(row.id) : this.sortByNumericValue(row.id)}
>
{row.label}
</TableSortLabel>
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{this.state.data.map((n, index) => {
return (
<TableRow
key={index}
>
<TableCell component="th" scope="row" >
{n.market_cap_rank}
</TableCell>
<TableCell >{n.name} </TableCell>
<TableCell ><NumberFormat value={n.current_price} displayType={'text'} decimalScale={2} thousandSeparator={true} prefix={'$'} /></TableCell>
<TableCell ><NumberFormat value={n.price_change_percentage_24h} displayType={'text'} decimalScale={2} /><span>%</span></TableCell>
<TableCell ><NumberFormat value={n.market_cap} displayType={'text'} decimalScale={2} thousandSeparator={true} prefix={'$'} /></TableCell>
<TableCell ><NumberFormat value={n.high_24h} displayType={'text'} decimalScale={2} thousandSeparator={true} prefix={'$'} /></TableCell>
<TableCell ><NumberFormat value={n.total_volume} displayType={'text'} decimalScale={2} thousandSeparator={true} prefix={'$'} /></TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</div>
</Paper>
</main>
);
}
}
Test.propTypes = {
classes: PropTypes.object.isRequired,
};
export default (withRouter(withStyles(styles)(Test)));