React中修改起止时间及新增行自动设置开始时间方案

以下是修复并匹配样式的代码，解决了时间计算错误，同时实现了表格化的布局：

import React, { useState } from 'react';

// 基础样式，匹配表格边框效果
const styles = {
  table: {
    borderCollapse: 'collapse',
    width: '100%',
    marginTop: '10px'
  },
  th: {
    border: '1px solid #ccc',
    padding: '8px',
    textAlign: 'left',
    backgroundColor: '#f0f0f0'
  },
  td: {
    border: '1px solid #ccc',
    padding: '8px'
  },
  input: {
    padding: '6px',
    width: '100%',
    boxSizing: 'border-box'
  },
  button: {
    padding: '6px 12px',
    cursor: 'pointer'
  }
};

const TimeInputRow = ({ data, onFieldChange, onAddRow, isLastRow }) => {
  const { date, startTime, endTime, name, address } = data;

  return (
    <tr>
      <td style={styles.td}>
        <input 
          type="date" 
          value={date} 
          onChange={(e) => onFieldChange('date', e.target.value)}
          style={styles.input}
        />
      </td>
      <td style={styles.td}>
        <input 
          type="time" 
          value={startTime} 
          onChange={(e) => onFieldChange('startTime', e.target.value)}
          style={styles.input}
        />
      </td>
      <td style={styles.td}>
        <input 
          type="time" 
          value={endTime} 
          onChange={(e) => onFieldChange('endTime', e.target.value)}
          style={styles.input}
        />
      </td>
      <td style={styles.td}>
        <input 
          type="text" 
          placeholder="Name" 
          value={name} 
          onChange={(e) => onFieldChange('name', e.target.value)}
          style={styles.input}
        />
      </td>
      <td style={styles.td}>
        <input 
          type="text" 
          placeholder="Address" 
          value={address} 
          onChange={(e) => onFieldChange('address', e.target.value)}
          style={styles.input}
        />
      </td>
      {isLastRow && (
        <td style={styles.td}>
          <button onClick={onAddRow} style={styles.button}>Add Row</button>
        </td>
      )}
    </tr>
  );
};

const Apdemo = () => {
  const [rows, setRows] = useState([
    { date: '2023-01-01', startTime: '00:00:00', endTime: '00:00:00', name: 'John Doe', address: '123 Main St' }
  ]);

  const handleFieldChange = (index, field, value) => {
    const newRows = [...rows];
    newRows[index][field] = value;
    setRows(newRows);
  };

  // 计算时间加1小时，返回{date: string, time: string}
  const addOneHourToTime = (baseDate, baseTime) => {
    const dateObj = new Date(`${baseDate}T${baseTime}`);
    dateObj.setHours(dateObj.getHours() + 1);
    
    return {
      newDate: dateObj.toISOString().split('T')[0],
      newTime: dateObj.toTimeString().split(' ')[0]
    };
  };

  const handleAddRow = () => {
    const lastRow = rows[rows.length - 1];
    const { newDate, newTime } = addOneHourToTime(lastRow.date, lastRow.startTime);
    
    const newRow = {
      date: newDate,
      startTime: newTime,
      endTime: lastRow.endTime,
      name: lastRow.name,
      address: lastRow.address
    };

    setRows([...rows, newRow]);
  };

  return (
    <div>
      <table style={styles.table}>
        <thead>
          <tr>
            <th style={styles.th}>Date</th>
            <th style={styles.th}>Start Time</th>
            <th style={styles.th}>End Time</th>
            <th style={styles.th}>Name</th>
            <th style={styles.th}>Address</th>
            <th style={styles.th}>Action</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((data, index) => (
            <TimeInputRow
              key={index}
              data={data}
              onFieldChange={(field, value) => handleFieldChange(index, field, value)}
              onAddRow={handleAddRow}
              isLastRow={index === rows.length - 1}
            />
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default Apdemo;

关键修改说明 #

• 布局调整：改用HTML表格实现带边框的规整布局，匹配目标样式
• 时间输入优化：将时间输入框改为type="time"，原生支持时间选择，无需手动正则验证
• 时间计算修复：新增addOneHourToTime函数，正确解析时间字符串并添加1小时，自动处理跨天的日期变更
• 按钮逻辑优化：仅在最后一行显示Add Row按钮，避免重复按钮干扰操作
• 样式优化：添加内联样式实现表格边框、内边距等基础样式，还原目标视觉效果

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