识别react代码中多个复选框中选中的输入，并将它们存储在一个空数组中

Question

在我的react项目中，我有许多与单个组件一起工作的多个复选框。现在，该组件中的数据将根据选中的复选框进行更改。现在我遇到的问题是保持选中复选框的跟踪，以便知道被选中的那个。

下面是我的代码和codesandbox链接在这里sandboxlink

App.js

import "./styles.css";
import React, { useEffect, useState, useRef } from "react";
import "./Datesvalues";
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 next_level2 = Defaultdata.filter((d, i) => {
return d.delivery_time_frame.substr(0, 10);
});
const [specificDateValues, setspecificdatevalues] = useState([]);
const [state, setstate] = useState(false);
const [inputcheck, setinputcheck] = useState(false);
const [valuecheck, setvaluecheck] = useState("");
const [allchecked, setallchecked] = useState([]);
const handlechange = (e) => {
setstate(!state);
setinputcheck(!inputcheck);
console.log(e.target.value);
setvaluecheck(e.target.value);
};
const handlecheck = (value) => {
setallchecked(valuecheck);
};
useEffect(() => {
setspecificdatevalues([...specificDateValues, ...next_level2]);
}, []);
return (
<div className="App">
{specificDateValues.map((dates, i) => (
<label style={{ listStyle: "none" }} key={i}>
<input
onChange={handlechange}
type="checkbox"
value={dates.delivery_time_frame.substr(0, 10)}
checked={handlecheck}
/>
<span>{dates.delivery_time_frame.substr(0, 10)}</span>
</label>
))}
{!state ? <h2>No dates checked</h2> : <Datesvalues date={valuecheck} />}
{console.log(handlecheck)}
</div>
);
}

和Datevalue组件

export default function Datesvalues({ date }) {
return (
<div>
<h1>{date}</h1>
<table>
<tr>
<th>Company</th>
<th>Contact</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>
);
}

Answer 1

有一堆东西，我不能从你的代码或数据中理解。这是我最好的猜测:

• https://codesandbox.io/s/flamboyant-vaughan-h8u8p?file=/src/App.js

一些注意事项:

• 数据不一致。您将需要一致的数据。我加入了额外的数据，以便能够做某事。
• 是的，有可能有一个数组来存储所有选择的值。但是，你必须考虑两件事(你存储什么，作为价值使用。但是你比较的是什么?
• 在这个例子中，我只存储一个假id(如果你的数据不一致，你也可以使用索引)，在checkedId函数中，我检查了该id是否在选定的id数组上。
我正在显示日期。但是你可以展示任何东西。代码:

import React, { useState } from "react";
import Datesvalues from "./Datesvalues";
import defaultData from "./defaultData";
import "./styles.css";
export default function App() {
const [checkedIds, setChekedIds] = useState([]);
const handlechange = (e) => {
const clickedId = +e.target.value;
if (checkedIds.includes(clickedId)) {
setChekedIds(checkedIds.filter((id) => id !== clickedId));
} else {
setChekedIds([...checkedIds, clickedId]);
}
};
const isCheked = (id) => {
checkedIds.includes(id);
};
const dates = defaultData
.filter((row, i) => checkedIds.includes(i))
.map((row) => row.delivery_time_frame.substr(0, 10));
const latestSelected = checkedIds.length
? defaultData.find((row, i) => i === checkedIds[checkedIds.length - 1])
: null;
return (
<div className="App">
{defaultData.map((dates, i) => (
<label style={{ listStyle: "none" }} key={i}>
<input
onChange={handlechange}
type="checkbox"
value={i}
checked={isCheked(dates.delivery_id)}
/>
<span>{dates.delivery_time_frame.substr(0, 10)}</span>
</label>
))}
{!checkedIds.length ? (
<h2>No dates checked</h2>
) : (
<Datesvalues date={dates.join(", ")} />
)}
{!checkedIds.length ? (
<h2>No dates checked</h2>
) : (
<Datesvalues date={latestSelected.delivery_time_frame.substr(0, 10)} />
)}
</div>
);
}