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

導出默認應用程序；