React项目中限制时分输入框的字符与时间范围求助

核心思路 #

用React受控组件管理输入状态，输入阶段过滤非数字字符，实时计算总时长并校验，确保最终时间落在**5秒到20分钟（1200秒）**范围内，同时处理分钟、秒的合法边界（比如秒数不超过59，分钟最大为20）。

完整代码实现 #

import { useState, useEffect } from 'react';

const TimeInput = () => {
  // 初始化状态：分钟0，秒10
  const [minutes, setMinutes] = useState('0');
  const [seconds, setSeconds] = useState('10');
  const [error, setError] = useState('');

  // 过滤非数字输入
  const handleNumberInput = (setValue) => (e) => {
    const inputValue = e.target.value.replace(/[^0-9]/g, '');
    setValue(inputValue);
  };

  // 实时验证总时长并处理边界
  useEffect(() => {
    const minNum = parseInt(minutes || 0, 10);
    const secNum = parseInt(seconds || 0, 10);
    const totalSeconds = minNum * 60 + secNum;

    // 处理秒数超过59的自动进位
    if (secNum > 59) {
      const extraMinutes = Math.floor(secNum / 60);
      setMinutes(prev => String(parseInt(prev || 0, 10) + extraMinutes));
      setSeconds(String(secNum % 60));
      return;
    }

    // 校验总时长范围
    if (totalSeconds < 5) {
      setError('总时长不能少于5秒');
    } else if (totalSeconds > 1200) {
      setError('总时长不能超过20分钟');
    } else {
      setError('');
    }
  }, [minutes, seconds]);

  // 提交时的最终校验
  const handleSubmit = (e) => {
    e.preventDefault();
    const minNum = parseInt(minutes || 0, 10);
    const secNum = parseInt(seconds || 0, 10);
    const totalSeconds = minNum * 60 + secNum;

    if (totalSeconds >= 5 && totalSeconds <= 1200) {
      console.log('合法时间：', `${minNum}m${secNum}s`);
      // 此处添加业务提交逻辑
    } else {
      setError('请输入5秒到20分钟之间的时间');
    }
  };

  return (
    <div>
      <span>
        <input
          value={minutes}
          onChange={handleNumberInput(setMinutes)}
          maxLength="2"
          placeholder="0"
        />
      </span>
      <span>m</span>
      <span>
        <input
          value={seconds}
          onChange={handleNumberInput(setSeconds)}
          maxLength="2"
          placeholder="0"
        />
      </span>
      <span>s</span>
      {error && <p style={{ color: 'red', marginTop: 8 }}>{error}</p>}
      <button onClick={handleSubmit} style={{ marginLeft: 16 }}>确认</button>
    </div>
  );
};

export default TimeInput;

关键功能说明 #

• 数字输入限制：通过replace(/[^0-9]/g, '')过滤所有非数字字符，确保输入框仅接受0-9的数字。
• 秒数边界处理：当秒数超过59时，自动将超出部分转换为分钟（例如输入65秒，自动转为1分钟5秒）。
• 实时校验提示：实时计算总秒数，若不符合范围则显示错误提示，用户输入过程中即可得到反馈。
• 受控组件状态：用useState完全管控输入值，避免非预期的输入内容。

可选优化点 #

• 自动补零：输入的分钟/秒数小于10时，自动在前面补零（比如5秒显示为05秒），可在useEffect中补充处理逻辑。
• 失焦自动修正：输入框失焦时，自动将时间调整到合法范围（例如总时长小于5秒时，自动设置为5秒）。
• 禁用提交按钮：总时长不合法时，禁用确认按钮，防止用户提交无效数据。

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