17、React 应用功能开发：排序下拉框、费用表单与日期选择器

React 应用功能开发：排序下拉框、费用表单与日期选择器

在 React 应用开发中，有许多实用的功能可以提升用户体验，比如排序下拉框、费用添加/编辑表单以及日期选择器等。下面将详细介绍这些功能的实现方法。

1. 排序下拉框（SortBy Dropdown）

在 React 应用里添加一个排序下拉框，能让用户依据自身偏好对数据进行排序。这里会使用 React Hooks 和 Redux 来实现该功能。

1.1 创建排序下拉框组件

首先，创建一个名为 SortByDropdown 的组件，代码如下：

import React from 'react';
const SortByDropdown = ({ sortByOptions, selectedOption, onOptionSelected }) => {
    return (
        <div className="sort-by-dropdown">
            <label htmlFor="sort-by">Sort By: </label>
            <select id="sort-by" value={selectedOption} onChange={(e) => onOptionSelected(e.target.value)}>
                {sortByOptions.map((option) => (