时间戳

首页 > 解决方案 > 使用 usestate 数组时将复选框类型的 reactjs 输入元素限制为 2

reactjs - 使用 usestate 数组时将复选框类型的 reactjs 输入元素限制为 2

问题描述

我的目的是让一周中的两天成为周末

问题在于这种方法我无法将周末数组限制为仅保留两天它总是超出

我认为问题在于状态是异步的，并且 setState 和 useEffect 具有不同的值但无法解决问题

const weekendDays = [
    "Saturday",
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
  ];
const [weekend, setWeekend] = useState([]);

const handleWeekendSelection = ({ target }) => {
    if (target.checked) {
      !weekend.includes(target.value) &&
        setWeekend((prev) => [...prev, target.value]);
    } else {
      setWeekend((prev) => [...prev].filter((day) => day !== target.value));
    }
  };

  useEffect(() => {
    console.log(weekend.length);
    if (weekend.length > 2) {
      const checkboxes = document.querySelectorAll(
        "input[type=checkbox]:checked"
      );
      const lastCheckbox = checkboxes[checkboxes.length - 1];
      lastCheckbox.checked = false;
setWeekend((prev) => {
        const correctedWeekend = prev;
        correctedWeekend.length > 2 && correctedWeekend.pop();
        return [...correctedWeekend];
  });
    }
  }, [weekend.length]);

        <div>
          {weekendDays.map((day, index) => {
            return (
              <div key={index}>
                <input
                  type="checkbox"
                  value={index}
                  onChange={handleWeekendSelection}
                />
                <label>{day}</label>
              </div>
            );
          })}
        </div>

标签： reactjs

解决方案

与其使用 useEffect ，不如在设置状态时处理它。像这样的东西

const handleWeekendSelection = ({ target }) => {
    if (target.checked) {
      if(!weekend.includes(target.value)){
        let newWeekend = [...weekend, target.value]
        if(weekend.length === ) newWeekend = [weekend[1], target.value]
        setWeekend(newWeekend);
      }
        
    } else {
      setWeekend((prev) => [...prev].filter((day) => day !== target.value));
    }
  };

推荐阅读