gpt4 book ai didi

javascript - 在 React 中处理复选框

转载 作者:行者123 更新时间:2023-12-02 22:37:24 24 4
gpt4 key购买 nike

我正在编写一个组件,用于处理一周中的天数和小时数。将时间状态传递给子组件“UpdateHours”的主要组件在对象中传递一周中的天数,所有天数设置为默认值 true。所以默认情况下所有复选框都是选中的。当我单击该日期时,该对象在我的控制台上更新为 false,但即使该值设置为 false,该复选框仍保持选中状态。奇怪的是,当我单击页面上更新后端的按钮时,我选中 false 的框将变为未选中状态。

从父组件传递的对象

function handleAddNewHour() {
var uid = generateUUID();
var newHour = {
mon: true,
tue: true,
wed: true,
thu: true,
fri: true,
sat: true,
sun: true,
start: 0,
end: 0,
service_type: "all",
id: uid
};

setTime(newHour);
}



{time != null ? (<UpdateHour time={time} setTimeChange={handleTimeUpdate}/>) : ( "" )}

UpdateHours.js 上的元素

 <div className="newHoursDay" onClick={() => handleDayChange("mon")}>
<input
type="checkbox"
name="new_hours_mon"
checked={props.time.mon}
value={props.time.mon}
onChange={() => handleDayChange("mon")}
/>
<label>Mon</label>
</div>

这里是函数

  function handleDayChange(day) {
let hourData = props.time;
hourData[day] = !props.time[day];
props.setTimeChange(hourData);

}

function handleServiceChange(serviceType) {
props.time[serviceType] = serviceTypes;
setState({});
}

此函数调用我的函数,用新对象更新 firestore 数据库

function handleSave() {
var hoursData = {
hours: {}
};
if (typeof store.hours !== "undefined") {
hoursData.hours = store.hours;
}
hoursData.hours[props.time.id] = {};
Object.keys(props.time).forEach(prop => {
if (prop === "id") {
hoursData.hours[props.time.id][prop] = props.time[prop];
}
});
changeStoreData(hoursData);

//updatestore
}

最佳答案

看起来在您的 handleDayChange 函数中,您直接在 time 属性上更新值。值得注意的是,React 中的 props 应该是只读的( https://reactjs.org/docs/components-and-props.html#props-are-read-only )。原因是,React 没有进行深度比较,而只是检查引用是否已更改。

因为 props.time 是一个对象,所以当您调用 let hourData = props.time 时,您将 hourData 设置为等于引用到 props.time。然后,当您更新 hourData 上的值时,它实际上是在更新 props.time,并且当您将 hourData 传递给 props.setTimeChange 它将引用传递给 props.time。由于引用没有改变,React 不知道对象已经发生了变化,因此不会使用更新后的值再次渲染。

希望这就像更新 handleDayChange 函数来创建新对象一样简单,而不是改变 props.time:

function handleDayChange(day) {
const hourData = {
...props.time,
[day]: !props.time[day]
};
props.setTimeChange(hourData);

}

关于javascript - 在 React 中处理复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58701069/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com