React识别多复选框选中状态并将选中值存入数组的实现问题

问题核心原因 #

你当前的代码存在以下几个核心问题导致无法正确跟踪复选框状态：

• 用字符串类型的valuecheck存储选中值，只能记录最后一次操作的复选框值，不支持多选项存储
• 复选框的checked属性绑定了未正确实现的handlecheck函数，没有和实际选中状态做关联
• next_level2的逻辑误用了filter方法，你需要的是提取每个项的日期前缀，应该用map而非filter
• 存在大量冗余状态，state、inputcheck这些变量完全没有必要存在

修复后的完整代码 #

App.js #

import "./styles.css";
import React, { useState } from "react";
import Datesvalues from "./Datesvalues";

export default function App() {
  const Defaultdata = [
    {
      date_listed: "4 hours ago",
      id: "7857699961",
      delivery_time_frame: "2021-10-25 - 2021-11-14",
      distance: "22.8 km",
      time_stamp: "2021-10-25 16:36:54",
      watched: "yes"
    },
    {
      date_listed: "3 days ago",
      id: "8358962006",
      delivery_time_frame: "2021-10-18 - 2021-10-24",
      distance: "4.3 km",
      time_stamp: "2021-10-22 16:54:12"
    },
    {
      date_listed: "4 hours ago",
      delivery_id: "8146462294",
      delivery_time_frame: "2021-10-25",
      distance: "4.3 km",
      time_stamp: "2021-10-25 16:12:32"
    },
    {
      date_listed: "4 hours ago",
      delivery_id: "8146462294",
      delivery_time_frame: "Don't have",
      distance: "4.3 km",
      time_stamp: "2021-10-25 16:12:32"
    },
    {
      date_listed: "4 hours ago",
      delivery_id: "8146462294",
      delivery_time_frame: "2021-10-25 - 2021-10-31",
      distance: "4.3 km",
      time_stamp: "2021-10-25 16:12:32"
    },
    {
      date_listed: "4 hours ago",
      delivery_id: "8146462294",
      delivery_time_frame: "2021-10-25 - 2021-11-14",
      distance: "4.3 km",
      time_stamp: "2021-10-25 16:12:32"
    }
  ];

  // 提取所有日期前缀，去重避免重复展示相同日期的复选框
  const dateOptions = [...new Set(Defaultdata.map(item => item.delivery_time_frame.substr(0, 10)))];
  // 用数组存储所有选中的日期
  const [checkedDates, setCheckedDates] = useState([]);

  const handleCheckboxChange = (e) => {
    const currentValue = e.target.value;
    if (checkedDates.includes(currentValue)) {
      // 已选中则移除
      setCheckedDates(checkedDates.filter(date => date !== currentValue));
    } else {
      // 未选中则添加
      setCheckedDates([...checkedDates, currentValue]);
    }
  };

  return (
    <div className="App">
      {dateOptions.map((date, i) => (
        <label style={{ listStyle: "none", display: "block" }} key={i}>
          <input
            onChange={handleCheckboxChange}
            type="checkbox"
            value={date}
            checked={checkedDates.includes(date)}
          />
          <span style={{ marginLeft: "8px" }}>{date}</span>
        </label>
      ))}

      {checkedDates.length === 0 ? 
        <h2>未选中任何日期</h2> : 
        // 多选场景下可以遍历展示所有选中日期的内容，这里保留原逻辑展示第一个选中的日期
        <Datesvalues date={checkedDates[0]} />
      }
    </div>
  );
}

Datesvalues.jsx #

该组件原逻辑无问题，可以直接复用：

export default function Datesvalues({ date }) {
  return (
    <div>
      <h1>{date}</h1>

      <table>
        <tr>
          <th>公司</th>
          <th>联系人</th>
        </tr>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
        </tr>
      </table>
    </div>
  );
}

补充说明 #

如果你的需求是单选而非多选，把<input>的type属性改成radio，再把checkedDates改成字符串类型的状态存储选中值即可，逻辑会更简单。

内容的提问来源于stack exchange，提问作者s life