从 for 循环中的 div 列表中获取变量到 onClick()

Question

我正在尝试制作一个日历，只需选择一个日期(这是一个(来更改其CSS类，具有基于reactjs类的组件，其中daySelected作为状态道具。

在 createCalendar(( 中，我使用指标(日期(获取日期数字，并在 for 循环中将其递增，让 onClick(( 将日期传递给 handleClick(date(。

当我选择任何一天时，我总是得到选择的最后一天。

我想从所选日期将可变日期传递给HandelClick(date(，请提出任何解决方案。

PS：我需要在单个组件内制作所有东西来控制状态道具日已选择

handleClick = day => {
this.setState(state => ({
checked: !state.checked,
daySelected: day
}));
};
createCalendar(currentMonth, currentYear) {
let firstDay = new Date(currentYear, currentMonth).getDay();
let daysInMonth =
32 - new Date(currentYear, currentMonth, 32).getDate() - 1;
var days = [];
let date = 0;
for (let i = 0; i < 5; i++) {
for (let j = 0; j < 7; j++) {
if (i === 0 && j < firstDay) {
var x = (
<div className={"Day"}>
<p> </p>
</div>
);
} else if (date > daysInMonth) {
break;
} else {
date++;

var x = (
// I want to get the variable date from here  
<div
value={date}
onClick={() => this.handleClick(date)}
className={this.state.daySelected == date ? "Day-checked" : "Day"}
>
<p>{date}</p>
</div>
);
}
days.push(x);
}
}
return days;
}

Answer 1

你在循环中重写一个x值(使用一个引用(，你应该使用一个函数。

只需将子组件定义转换为函数，就像const x = (date) => {...一样，并在循环中使用它。