本文教你用 react 构建一个可交互的习惯追踪表格：用户输入年月后，自动渲染该月全部日期作为首列，每行右侧动态添加已定义的习惯列，支持为每个“日期-习惯”交叉单元格标记 'x'（如打卡记录）。
本文教你用 react 构建一个可交互的习惯追踪表格：用户输入年月后，自动渲染该月全部日期作为首列，每行右侧动态添加已定义的习惯列，支持为每个“日期-习惯”交叉单元格标记 'x'（如打卡记录）。
要实现一个结构清晰、功能完整的习惯追踪表格，核心在于按月动态生成日期行 + 按需扩展习惯列 + 支持单元格级交互。原始代码存在几个关键问题：daysArray 被声明为函数外全局变量（导致状态污染）、日期与习惯未正确嵌套渲染、缺少实际打卡逻辑（如填入 'X'），且 Object.keys(dailyHabits).map(...) 错误地将数组当对象遍历。
以下是优化后的完整实现方案：
✅ 正确渲染“日期 × 习惯”二维结构
每行代表一天，首列为日期（禁用输入框显示），后续每列为一个习惯项——这需在 dateArray.map() 内部再次遍历 dailyHabits，形成嵌套结构：
{dateArray.map((day) => (
<div key="{day}" classname="date-row">
<input disabled placeholder="{day}" classname="date-cell">
{dailyHabits.map((habit, habitIndex) => (
<input key="{`${day}-${habitIndex}`}" placeholder="{habit}" classname="habit-cell" value onchange>
))}
</div>
))}
✅ 修复日期计算逻辑
getCorrectDates 应返回新数组而非复用外部变量，并注意 month 输入值需转为数字（parseInt(month, 10)），因为 HTML input 返回字符串；同时 new Date(year, month, 0) 中 month 是 0-based（1月 = 0），故用户输入 1 对应 new Date(year, 1, 0) → 实际计算的是2月天数。修正方式：传入 parseInt(month, 10) - 1：
function getCorrectDates(monthStr, yearStr) {
const month = parseInt(monthStr, 10) - 1; // 转为 0-based
const year = parseInt(yearStr, 10);
if (isNaN(month) || isNaN(year)) return [];
const numDays = new Date(year, month + 1, 0).getDate(); // 或直接 new Date(year, month, 0).getDate()
return Array.from({ length: numDays }, (_, i) => i + 1);
}
✅ 添加打卡交互能力（支持填入 'X'）
为每个习惯单元格维护独立状态。推荐使用二维数组 checkmarks[dayIndex][habitIndex] 或更灵活的对象结构：
const [checkmarks, setCheckmarks] = useState({});
// 更新某日某习惯的打卡状态
const toggleCheck = (day, habitIndex) => {
setCheckmarks(prev => ({
...prev,
[day]: {
...(prev[day] || {}),
[habitIndex]: prev?.[day]?.[habitIndex] === 'X' ? '' : 'X'
}
}));
};
// 渲染时绑定 value 和 onChange
<input value="{checkmarks[day]?.[habitIndex]" onchange="{()"> toggleCheck(day, habitIndex)}
className="habit-cell"
/>
✅ 完整优化要点总结
- 状态隔离：所有数据驱动状态（dateArray, dailyHabits, checkmarks）均通过 useState 管理，避免副作用。
- 输入校验：对 month/year 做数值转换与合法性检查（如 1–12 月、合理年份）。
- 样式增强：为 .date-row, .date-cell, .habit-cell 添加 CSS（如 display: flex, gap, width）确保表格对齐。
- 用户体验：提交按钮可增加 loading 状态；习惯删除、日期重置等功能可后续扩展。
最终，你将获得一个真正实用的习惯追踪组件——它不只是静态展示，而是支持用户自主配置周期、增删习惯、实时打卡，为个人成长提供可靠的数据基座。
