根据ReactJs中的事件改变状态

Question

i在react js应用程序中的下一个代码:

const items = [
{
value: "A",
label: "A"
},
{
value: "B",
label: "B"
},
{
value: "C",
label: "C"
},
{
value: "D",
label: "D"
},
{
value: "E",
label: "E"
}
];
const Test = () => {
const [actives, setActives] = useState(["A", "C"]);
function onChange(checkedValues) {
console.log("checked = ", checkedValues);
setActives(checkedValues);
}
console.log(actives);
return (
<>
<Form name="basic" initialValues={{ remember: true }}>
<Form.Item
label="Username"
name="username"
rules={[{ required: true, message: "Please input your username!" }]}
>
<Checkbox.Group
style={{ width: "100%" }}
value={actives}
onChange={onChange}
>
<Row>
{items.map((i) => {
return (
<Col className={actives.includes(i.value) ? "active" : ""}>
<Checkbox value={i.value}>{i.label}</Checkbox>
</Col>
);
})}
</Row>
</Checkbox.Group>
</Form.Item>
</Form>
</>
);
};

这里有一组复选框。根据点击的复选框，它应该显示红色-active类。现在您可以看到，默认情况下选中了其中一些选项。const [actives, setActives] = useState(["A", "C"]);
我想实现这个:

当用户将选择另一个复选框而不是那些活动的复选框时，活动复选框不必像现在这样被禁用。如果用户单击已经激活的复选框，我们应该从该复选框中删除活动类。最终用户应该能够将活动类添加到所有复选框中，但要考虑到之前已经活动的复选框。

问题:如何实现?
我试着做这样的事情，但它不工作:

function onChange(checkedValues) {
console.log("checked = ", checkedValues);
if (!actives.includes(checkedValues[length - 1])) {
setActives(checkedValues.filter((i) => i !== checkedValues[length - 1]));
}
setActives(checkedValues);
}

演示:https://codesandbox.io/s/use-with-grid-antd4123-forked-5kku2?file=/index.js: 479 - 736

Answer 1

可以通过"event.target.value"找到选中的复选框的值。如果该值已经处于actives状态，只需删除该值，否则在您的状态中添加该值。

呈现时，根据actives状态检查每个值，以设置其checked状态和活动类。

const { useState } = React;
const items = [{ value: "A", label: "A" }, { value: "B", label: "B" }, { value: "C", label: "C" }, { value: "D", label: "D" }, { value: "E", label: "E" } ];
const Test = () => {
const [actives, setActives] = useState(["A", "C"]);

const onChange = (event) => {
const checked = event.target.value;
const other = actives.filter(active => active !== checked);
if (actives.length === other.length) {
setActives([...actives, checked]);
} else {
setActives(other);
}
}
return <div onChange={onChange}>
{
items.map((item) => {
return  <div><input checked={actives.includes(item.value)} type="checkbox" value={item.value} name={item.label} />
<label className={actives.includes(item.value) ? 'active' : ''} for={item.label}>{item.label}</label></div>
})
}
</div>
};
ReactDOM.render(<Test />, document.getElementById("react"));

.active {
color: #4CAF50;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 2

将function onChange(checkedValues)更改为箭头函数。应该没问题。