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>
  );
}

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

1 个答案: