我如何才能坚持过滤器按钮中特定复选框的状态

Question

我是新手。我正在构建一个应用程序，我使用一个具有多个复选框的筛选按钮。我不能做的是在单击应用按钮后保持特定复选框的状态。所有选中的复选框将再次取消选中。

const [isChecked, setIsChecked] = useState(false);
function handleApply() {
setIsOpen(false);
let names = [];
let checks = document.getElementsByClassName('checks');
for (let i = 0; i < checks.length; i++) {
if (checks[i].checked === true) {
names.push(checks[i].name);
}
}
alert(names);
}

这是当我单击应用按钮时运行的应用函数。

<li>
<input type="checkbox" name="Option 1" className="checks" value="1" defaultChecked={isChecked} onChange={handleCheck} />
<label htmlFor="Option 1">Option 1</label>
</li>
<li>
<input type="checkbox" name="Option 2" className="checks" value="2" defaultChecked={isChecked} onChange={handleCheck} />
<label htmlFor="Option 2"> Option 2</label>
</li>
<button onClick={handleApply}>
Apply
</button>

这些是我正在使用的复选框和按钮。我不知道如何编写handlecheck函数，所以在单击应用按钮后，它将保持选中/未选中状态。

Answer 1

我想这可能就是你想要的？

代码沙盒链接：https://codesandbox.io/s/fervent-turing-j3e9s

import "./styles.css";
import { useState } from "react";
export default function App() {
const [checkedItems, setCheckedItems] = useState({});
const checkboxes = [
{
name: "firstCheckBox",
key: "checkBox1",
label: "Check Box 1",
v: "1"
},
{
name: "secondCheckBox",
key: "checkBox2",
label: "Check Box 2",
v: "2"
}
];
const handleApply = () => {
console.log(checkedItems);
};
const handleChange = (event) => {
// updating an object instead of a Map
setCheckedItems({
...checkedItems,
[event.target.name]: event.target.checked
});
};
return (
<div className="App">

{checkboxes.map((item) => (
<li key={item.key}>
<label>{item.label}</label>
<input
type="checkbox"
name={item.name}
className="checks"
value={item.v}
defaultChecked={checkedItems[item.name]}
onChange={handleChange}
/>
</li>
))}
<button onClick={handleApply}>Apply</button>
</div>
);
}