Reactjs 如何选中导航链接中的复选框？

我需要一个在导航链接复选框，我希望他们相互独立的工作，但复选框不工作。我在bootstrap中使用form check，我认为bootstrap的form.check在nav链接中不起作用，我尝试将form.check替换为simple input，键入is checkbox，但此方法也不起作用。可能原因在于导航链接，如何解决这个问题

例如： 试试这个

import React, { useState } from "react";
import { Nav, Form } from "react-bootstrap";
import "./styles.css";

export default function App() {
  const [checkboxes, setCheckboxes] = useState({});

  const hadleClick = (key) => {
    setCheckboxes({
      ...checkboxes,
      [key]: !checkboxes[key]
    });
  };

  return (
    <Nav>
      <Nav.Item onClick={() => hadleClick("one")}>
        <Nav.Link>
          <Form.Check
            onClick={() => hadleClick("one")}
            type="checkbox"
            checked={checkboxes.one}
            id="checkbox1"
            name="checkbox1"
            label="OK 1"
          />
        </Nav.Link>
      </Nav.Item>
      <Nav.Item onClick={() => hadleClick("two")}>
        <Nav.Link>
          <Form.Check
            checked={checkboxes.two}
            type="checkbox"
            id="checkbox2"
            name="checkbox2"
            label="OK 2"
          />
        </Nav.Link>
      </Nav.Item>
      <Nav.Item onClick={() => hadleClick("third")}>
        <Nav.Link>
          <Form.Check
            checked={checkboxes.third}
            type="checkbox"
            id="checkbox3"
            name="checkbox2"
            label="OK 3"
          />
        </Nav.Link>
      </Nav.Item>
    </Nav>
  );
}

import React，{useState}来自“React”；
从“react bootstrap”导入{Nav，Form}；
导入“/styles.css”；
导出默认函数App（）{
const[checkbox，setcheckbox]=useState（{}）；
常量hadleClick=（键）=>{
设置复选框({
…复选框，
[键]：！复选框[键]
});
};
返回(
hadleClick（“一”）}>
hadleClick（“一个”）}
type=“复选框”
选中={checkbox.one}
id=“checkbox1”
name=“checkbox1”
label=“确定1”
/>
hadleClick（“两个”）}>
hadleClick（“第三”）}>
);
}

这里是codesandbox链接

---

我找到了解决办法。若你们想在react引导程序中将复选框添加到nav链接，你们需要将方法设置为“as”参数

<Nav>
  <Nav.Item>
    <Nav.Link
      eventKey={"checkbox1"}
      as={(props) => (
        <a {...props} href={"#"}>
          <Form.Check type="checkbox" id="checkbox1" /> {"nav link1"}
        </a>
      )}
    />
  </Nav.Item>
  <Nav.Item>
    <Nav.Link
      eventKey={"checkbox2"}
      as={(props) => (
        <a {...props} href={"#"}>
          <Form.Check type="checkbox" id="checkbox2" /> {"nav link1"}
        </a>
      )}
    />
  </Nav.Item>
  <Nav.Item>
    <Nav.Link
      eventKey={"checkbox3"}
      as={(props) => (
        <a {...props} href={"#"}>
          <Form.Check type="checkbox" id="checkbox3" /> {"nav link1"}
        </a>
      )}
    />
  </Nav.Item>
</Nav>

(
)}
/>
(
)}
/>
(
)}
/>

---

谢谢您的answare，但您的代码工作不正确。您是否检查了代码沙盒链接？你在期待什么？是的。在您的代码复选框中，仅在单击链接但不使用更改复选框时选中。尝试链接标签，

OK1

I更新了沙盒代码。请现在检查