React前端如何将时分格式字符串转为数字适配Solidity后端

核心转换函数 #

你可以通过字符串分割和数值计算实现格式转换，同时加入格式验证避免无效输入：

const convertTimeToNumber = (timeStr) => {
  // 验证时间格式是否符合 H:mm 或 HH:mm
  const timeRegex = /^\d{1,2}:\d{2}$/;
  if (!timeRegex.test(timeStr)) {
    throw new Error('无效时间格式，请输入 HH:mm 或 H:mm 格式的时间');
  }

  // 分割小时和分钟并转为整数
  const [hours, minutes] = timeStr.split(':').map(segment => parseInt(segment, 10));

  // 验证时间范围有效性
  if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) {
    throw new Error('时间超出合理范围，请输入 00:00-23:59 之间的时间');
  }

  // 计算转换后的数字：小时*100 + 分钟
  return hours * 100 + minutes;
};

React 表单集成示例 #

在你的活动创建表单中，可在提交时调用上述函数处理时间值，再传递给Solidity合约：

import { useState } from 'react';

function EventCreationForm() {
  const [startTime, setStartTime] = useState('');
  const [endTime, setEndTime] = useState('');

  const convertTimeToNumber = (timeStr) => {
    const timeRegex = /^\d{1,2}:\d{2}$/;
    if (!timeRegex.test(timeStr)) {
      throw new Error('无效时间格式，请输入 HH:mm 或 H:mm 格式的时间');
    }

    const [hours, minutes] = timeStr.split(':').map(segment => parseInt(segment, 10));

    if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) {
      throw new Error('时间超出合理范围，请输入 00:00-23:59 之间的时间');
    }

    return hours * 100 + minutes;
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      // 转换时间格式
      const formattedStartTime = convertTimeToNumber(startTime);
      const formattedEndTime = convertTimeToNumber(endTime);

      // 调用Solidity合约方法（示例）
      // await yourContract.createEvent(formattedStartTime, formattedEndTime, otherParams);
      console.log('转换后开始时间：', formattedStartTime);
      console.log('转换后结束时间：', formattedEndTime);
    } catch (error) {
      alert(error.message);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>活动开始时间：</label>
        <input
          type="time"
          value={startTime}
          onChange={(e) => setStartTime(e.target.value)}
          required
        />
      </div>
      <div>
        <label>活动结束时间：</label>
        <input
          type="time"
          value={endTime}
          onChange={(e) => setEndTime(e.target.value)}
          required
        />
      </div>
      <button type="submit">创建活动</button>
    </form>
  );
}

export default EventCreationForm;

关键说明 #

• 转换逻辑：将9:00分割为['9', '00']，转为整数后计算9*100 + 0 = 900，9:30则得到930，完全适配Solidity的数值类型要求。
• 格式验证：通过正则表达式和范围检查，避免用户输入无效时间导致合约调用失败。
• 异常处理：转换失败时抛出明确错误，前端可通过弹窗或提示告知用户问题所在。

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