从 React-Bootstrap 下拉列表中检索值

Question

我正在尝试获取下拉项的值，例如使用下拉按钮选择的“操作”或“另一个操作”。 我知道我需要使用onSelect事件，但它只给了我不是我想要的href值。 任何帮助表示赞赏。

https://react-bootstrap.github.io/components/dropdowns/

  <Dropdown.Toggle onSelect={(e)=> {console.log(e)}} variant="success" id="dropdown-basic">
    Dropdown Button
  </Dropdown.Toggle>

  <Dropdown.Menu>
    <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
    <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
    <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

Answer 1

下拉菜单是可切换的上下文覆盖，用于显示链接列表等。

如果您在提供的链接上阅读文档，则Dropdown.Toggle没有名为onSelect的道具。

也就是说，您可能会添加一些状态并通过数据呈现您的项目。 这样您就可以将最后点击的Item存储在状态中。

import { useState } from "react";
import Dropdown from "react-bootstrap/Dropdown";
import "bootstrap/dist/css/bootstrap.min.css";

const items = ["Action", "Another action", "Something else"];

const App = () => {
  const [selectedItem, setSelectedItem] = useState("");

  return (
    <>
      <Dropdown>
        <Dropdown.Toggle variant="success">Dropdown Button</Dropdown.Toggle>
        <Dropdown.Menu>
          {items.map((item) => (
            <Dropdown.Item onClick={() => setSelectedItem(item)}>
              {item}
            </Dropdown.Item>
          ))}
        </Dropdown.Menu>
      </Dropdown>
      <pre>selectedItem: {selectedItem}</pre>
    </>
  );
};

导出默认应用程序；