Блог

Я столкнулся с небольшой проблемой при настройке стрелок направления при нажатии на заголовки таблиц для выполнения сортировки каждого столбца. Таблица создается динамически, как вы можете видеть в приведенном ниже коде.

Чего я хотел бы добиться, так это того, чтобы стрелка появлялась только при нажатии на каждый столбец и исчезала при переключении столбца. Что мне удалось сделать, так это переключить стрелки, но они появляются во всех столбцах даже при загрузке страницы, чего я не хочу.

У вас есть какие-либо предложения, чтобы сделать это? У меня нет идей…

Вот фрагмент класса:

 import { connect } from 'react-redux';
import { orderBy } from "lodash";

class Test extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            currentlyDisplayed: this.props.games,
            sortParams: {
                direction: undefined   
            }
        };

        this.handleColumnHeaderClick = this.handleColumnHeaderClick.bind(this);
    }

    handleColumnHeaderClick(sortKey, e) {
        const {
            currentlyDisplayed,
            sortParams: { direction }
        } = this.state;


        // Check, what direction now should be
        const sortDirection = direction === "desc" ? "asc" : "desc";

        // performing the column switch and class toggle
        this.setState(prevState => ({ editingContactId: prevState.editingContactId === sortKey? null:sortKey})) 
        

        // Sort collection
        const sortedCollection = orderBy(currentlyDisplayed, [sortKey], [sortDirection]);

        //Update component state with new data
        this.setState({
          currentlyDisplayed: sortedCollection,
          sortParams: {
            direction: sortDirection
          }
        });
    }

      
    printObj(type='body', obj) {
        const content = [];

        for(const [key, value] of Object.entries(obj)) {
            content.push(this.buildCell(type, key, value));
        }

        return content;
    }

 
    buildCell(type='body', key, value) {
        return (
            <>       
                { type==='header' ? <th className={key === this.state.editingContactId ? 'sort-desc' : 'sort-asc'}  onClick={(e) => this.handleColumnHeaderClick(key, e)} key={key}>{key}</th> : <td key={key}>{value}</td> }
            </>
        );

    }

    render() {

        return (
            <>
              <table>
                    <thead>
                        <tr>
                            {this.state.currentlyDisplayed.length !== 0 amp;amp; 
                                this.printObj('header', this.props.games[0])
                            }
                        </tr>
                    </thead>
                    <tbody>
                        {this.state.currentlyDisplayed.length !== 0 amp;amp; 
                            this.state.currentlyDisplayed.map((obj, key) => {
                                return (
                                    <tr key={key}>
                                        { this.printObj('body', obj) }
                                    </tr>
                                );
                            })
                        }
                    </tbody>
                </table>
            </>
        );
    }
}

export default connect(
    mapStateToProps
)(Test);
  

Попробуйте что-то подобное, используя направление сортировки.

  <th className={key === this.state.editingContactId
  ? this.sortParams.direction === "asc"
    ? "sort-asc"
    : "sort-desc"
  : ""}