在React中处理复选框

2024-05-07 • 问答

我有一个正在编写的组件可以处理一周中的几天和几小时。以时间状态传递给子组件“ 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不会进行深入比较，而只是检查 reference 是否已更改。

由于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);

}

在React中处理复选框

likexiaoshuang 回答：在React中处理复选框

大家都在问