根据 ReactJs 中的事件改变状态

Question

我在 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) 更改为箭头函数。这应该可以正常工作。