基于排序更改箭头图标的位置

Question

嗨，我的排序是通过后端完成的，我需要在UI中反映它的反应。

我想要实现这一点：

默认情况下，当页面加载(此阶段不进行排序)时，ascending

• Click

• 箭头位置将指向向下，单击Arrow将指向向上排序表结果，再次指向箭头上的排序表结果，这将指向向下排序表结果为降序

现在我的代码执行以下操作：

1. 箭头位置默认为在页面加载

时指向向上。

1. 单击Arrow它更改为向下箭头，并将表结果排序为降序

1. 再次单击Arrow，它将更改为向上，并将表结果排序为升序。

从‘react’导入React，{ useState，useEffect }；从‘styled type’导入PropTypes；从‘styled components’导入{ FaIcon }；从‘./图标’导入{FaIcon}；const HeaderWrapper = styled.divwidth: 100%; display: flex; justify-content: space-between; align-items: center;；const Div = styled.divfont-weight: bold;；const Icon = styled(FaIcon)font-size: 16px;；const TableHeader = ({ title，field，getSortedJobs }) => { const升序，setAscending = useState(null)；const nullCheck =((！)升序返回'desc'；如果(升序=== 'asc')返回'desc'；返回'asc'；}；const positionArrow = () => { if (！=== )返回'far'，'chevron-up'；如果(升序=== 'asc')返回'far'，'chevron-up'；返回'far'，'chevron-down'；}；}；=> {setAscending(NullCheck)；}；useEffect(() => { if (升序)getSortedJobs(字段，升序)；}，升序)；返回( sortBy () }> {title} )；}；TableHeader.propTypes ={ title: PropTypes.string，字段: PropTypes.array，getSortedJobs: PropTypes.func，}；TableHeader.defaultProps ={ title：‘，字段：[]，getSortedJobs：() => {}，}；导出默认值TableHeader；

Answer 1

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

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

至：

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

因为ascending将是null，所以您首先希望箭头指向下面。

那么，我认为您也应该在函数nullCheck中更改这一行

if (!ascending) return 'desc';

至：

if (!ascending) return 'asc';

由于ascending将首先使用null/falsey (即最初的desc )，因此下一个值需要是asc。

Sidenote:由于您希望在ascending是null或desc时具有相同的行为，所以您也可以将函数重写为：

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

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

这还允许您摆脱函数nullCheck (如果您没有在sortBy以外的任何地方使用它)。

Answer 2

您应该在这里设置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'];
};