Question

我正在使用Material UI在react中创建一个表。当我单击表中的每个列标题时，数据将正确显示和排序。但是，我希望active属性仅在单击该特定列时才变为活动。现在，它的工作方式是所有列标题仅在活动和不活动之间交替（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)));

Answer 1

当您单击某些列时，必须添加一些css，以使活动css应该在那里，而当您单击其他列时，以前应该为false并且应该激活当前项。这样，您就可以实现功能。

如何启用表中一列的状态（React Js）

1 个答案: