React实现Material UI下拉框时间单位转换问题

你可以通过创建一个数值格式化函数，针对不同范围的时间值返回对应的显示文本，再结合Material UI的Select组件实现需求：

首先定义格式化函数，处理不同数值的显示规则：

const formatTimeOption = (value) => {
  if (value === 720) return '12h';
  if (value === 1440) return '24h';
  if (value >= 5 && value <= 60) return `${value}m`;
  // 可选：处理未覆盖的数值场景，比如返回原始值或自定义提示
  return String(value);
};

然后在你的React组件中，用这个函数渲染下拉选项的显示文本，同时保留原始数值作为选项的value（方便后续业务逻辑处理）：

import { Select, MenuItem, FormControl, InputLabel } from '@mui/material';
import { useState } from 'react';

const TimeSelect = () => {
  const [selectedTime, setSelectedTime] = useState(5);
  // 定义所有需要的时间数值选项
  const timeValues = [5, 10, 15, 30, 60, 720, 1440];

  return (
    <FormControl sx={{ minWidth: 120 }}>
      <InputLabel id="time-select-label">选择时间</InputLabel>
      <Select
        labelId="time-select-label"
        id="time-select"
        value={selectedTime}
        label="选择时间"
        onChange={(e) => setSelectedTime(Number(e.target.value))}
      >
        {timeValues.map((val) => (
          <MenuItem key={val} value={val}>
            {formatTimeOption(val)}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );
};

export default TimeSelect;

关键说明 #

• 格式化函数formatTimeOption严格按照需求匹配：720转12h，1440转24h，5-60的数值转Xm格式
• 下拉选项的value始终使用原始数值，避免后续处理显示文本时的解析麻烦
• 通过map遍历数值数组生成选项，代码简洁易维护，后续新增时间值只需在timeValues数组中添加即可

内容的提问来源于stack exchange，提问作者sourabh k