根据排序更改箭头图标的位置

Question

您好，我的排序是通过后端完成的，我需要使用 React 在 UI 中反映它。

我希望实现这一目标：

页面加载时箭头位置默认指向下方（此阶段不进行排序）
单击箭头，这将向上排序 table 结果为升序
再次单击箭头，这将向下排序 table 结果为降序

现在我的代码是这样做的：

页面加载时箭头位置默认指向上方
单击箭头，它变为向下箭头并将 table 结果按降序排列

再次单击箭头，它变为向上并按升序对 table 结果进行排序

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { FaIcon } from './icons';

const HeaderWrapper = styled.div`
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
`;

const Div = styled.div`
  font-weight: bold;
`;
const Icon = styled(FaIcon)`
  font-size: 16px;
`;

const TableHeader = ({ title, field, getSortedJobs }) => {
  const [ascending, setAscending] = useState(null);

  const nullCheck = () => {
    if (!ascending) return 'desc';
    if (ascending === 'asc') return 'desc';
    return 'asc';
  };

  const positionArrow = () => {
    if (!ascending) return ['far', 'chevron-up'];
    if (ascending === 'asc') return ['far', 'chevron-up'];
    return ['far', 'chevron-down'];
  };

  const sortBy = () => {
    setAscending(nullCheck());
  };

  useEffect(() => {
    if (ascending) getSortedJobs(field, ascending);
  }, [ascending]);
  return (
    <HeaderWrapper onClick={() => sortBy()}>
      <Div>{title}</Div>
      <Icon icon={positionArrow()} />
    </HeaderWrapper>
  );
};

TableHeader.propTypes = {
  title: PropTypes.string,
  field: PropTypes.array,
  getSortedJobs: PropTypes.func,
};

TableHeader.defaultProps = {
  title: '',
  field: [],
  getSortedJobs: () => {},
};

export default TableHeader;

Answer 1

您应该在这里设置 ascending 的值，这样当您下次调用 nullCheck() 时，您将不会总是得到 desc 作为排序值。

const nullCheck = () => {
    ascending = (!ascending || ascending === 'asc') ? 'desc' : 'asc';

    return ascending;
};

您可以为 if 语句加入您的条件

const positionArrow = () => {
    if (!ascending || ascending === 'asc') return ['far', 'chevron-up'];
    return ['far', 'chevron-down'];
};

Answer 2

未经测试，但我认为您需要更改函数中的这一行 positionArrow:

if (!ascending) return ['far', 'chevron-up'];

至：

if (!ascending) return ['far', 'chevron-down'];

因为 ascending 将是 null/falsey 并且您希望箭头指向下方开始。

那么我认为你也应该在函数 nullCheck:

中更改这一行

if (!ascending) return 'desc';

至：

if (!ascending) return 'asc';

因为 ascending 将以 null/falsey 开头（即最初是 desc），所以下一个值需要是 asc.

旁注：由于您希望 ascending 为 null 或 desc 时具有相同的行为，您还可以将函数重写为：

const positionArrow = () => {
  return ['far', 'asc' === ascending ? 'chevron-up' : 'chevron-down'];
};

const sortBy = () => {
  setAscending(prev => 'asc' === prev ? 'desc' : 'asc');
};

这也可以让您摆脱函数 nullCheck（如果您不在 sortBy 以外的任何地方使用它）。

根据排序更改箭头图标的位置

Change position of arrow icon based on sort

javascript

sorting

columnsorting

reactjs