效果图
逻辑简述
此组件需传入一个默认排序状态(无序、正序、倒序)和一个点击事件函数(根据点击次数在无序、正序、倒序之间切换并查询数据)
核心源代码
在你的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');
}}
>

</i>
<i
className={`iconfont ${
status === state.DES ? styles.active : styles.normal
}`}
onClick={e => {
e.stopPropagation();
clickButton('desc');
}}
>

</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>