基于React封装的排序按钮通用组件

效果图

逻辑简述

此组件需传入一个默认排序状态（无序、正序、倒序）和一个点击事件函数（根据点击次数在无序、正序、倒序之间切换并查询数据）

核心源代码

在你的components文件夹下新建SortButton文件夹，在SortButton文件夹下新建index.jsx文件，复制粘贴以下代码：

/**
 * @author kqzhu
 * @date 2020/04/26
 * @description  排序按钮组件
 * @params children(String)：需要显示的DOM子元素, clickButton(Function)：点击事件回调方法, status(String)：当前状态
 */

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import styles from './index.less';

const state = {
  DEF: 0,
  DES: 1,
  ASC: 2,
};
const tranformStatus = status => {
  switch (status) {
    case '0':
      return state.DEF;
    case 'desc':
      return state.DES;
    case 'asc':
      return state.ASC;
    default:
      return state.DEF;
  }
};

export default function SortButton({ children, clickButton, status }) {
  /**
   *  undefined=0 , 1=1 ,2=2
   * @type {number}
   */
  status = tranformStatus(status);

  const changeSortState = newStatus => {
    switch (newStatus) {
      case state.DEF:
        return '0';
      case state.DES:
        return 'desc';
      case state.ASC:
        return 'asc';
      default:
        return '0';
    }
  };

  return (
    <Fragment>
      <span
        className={`${
          status === state.DEF
            ? styles.sortButtonNormal
            : styles.sortButtonActive
        }`}
      >
        <span
          onClick={e => {
            e.stopPropagation();
            const newStatus = status === state.DES ? state.ASC : status + 1;
            clickButton(changeSortState(newStatus));
          }}
        >
          {children}
        </span>
        <span className={`${styles.sortIcon}`}>
          <i
            className={`iconfont ${
              status == state.ASC ? styles.active : styles.normal
            }`}
            onClick={e => {
              e.stopPropagation();
              clickButton('asc');
            }}
          >
            &#xeb8c;
          </i>
          <i
            className={`iconfont ${
              status === state.DES ? styles.active : styles.normal
            }`}
            onClick={e => {
              e.stopPropagation();
              clickButton('desc');
            }}
          >
            &#xeb8d;
          </i>
        </span>
      </span>
    </Fragment>
  );
}

SortButton.propTypes = {
  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
  status: PropTypes.string,
  clickButton: PropTypes.func,
};

说明：其中正序倒序按钮中的箭头图标使用的是iconfont，如没有此图标可更换其他图标库。

CSS样式代码

在SortButton文件夹下新建index.less文件并复制粘贴以下代码：

.sortButtonActive {
  padding: 8px 15px;
  margin: 0px;
  background: #f6fafd;
  cursor: pointer;
  border: 1px solid #2b7bff;
  border-radius: 20px;
  color: #2b7bff;
}

.sortButtonNormal {
  padding: 8px 15px;
  margin: 0px;
  background: #f6fafd;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 20px;
  color: #bbbbbc;
}
.sortIcon {
  padding-left: 5px;
  i {
    margin: 0px -5px;
    font-size: 16px;
  }
  .active {
    color: #2b7bff;
  }
  .normal {
    color: #bbbbbc;
  }
}

说明：样式可以根据自己的需求酌情修改。

使用方法

在需要用的地方引入此组件

import SortButton from '@components/SortButton';

定义排序按钮点击事件方法并传入排序组件（clickButton参数）
在state里定义排序的默认状态并传入排序组件（status参数）

	<SortButton
        clickButton={this.onClickSortButtonModifyTime}
        status={this.state.modifyTimeOrder}
    >
      更新时间
    </SortButton>