React 中的 Bootstrap 下拉選單

Rana Hasnain Khan 2022年5月18日
React 中的 Bootstrap 下拉選單

我們將演示如何在 React 中建立 Bootstrap 下拉選單並將值從列表傳遞到 Bootstrap 下拉選單。

React 中的 Bootstrap 下拉選單

要在 Bootstrap 中建立下拉選單,我們必須安裝兩個庫,react-bootstrapbootstrap。我們可以使用 CLI 輕鬆安裝它們。

# CLI
npm i react-bootstrap
npm i bootstrap

安裝這些庫後,我們必須在 index.js 中匯入 bootstrap CSS

# react
import "bootstrap/dist/css/bootstrap.min.css";

index.js 檔案中匯入 bootstrap CSS 後。我們必須在 App.js 中匯入 Dropdown

# react
import Dropdown from "react-bootstrap/Dropdown";

現在,我們將使用 Bootstrap 建立一個下拉選單。

# react
<div className="App">
      <Dropdown onSelect={this.change}>
        <Dropdown.Toggle variant="info" id="dropdown-basic">
          Dropdown Menu
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item value="1">Option 1</Dropdown.Item>
          <Dropdown.Item value="2">Option 2</Dropdown.Item>
          <Dropdown.Item value="3">Option 3</Dropdown.Item>
          <Dropdown.Item value="4">Option 4</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </div>

輸出:

React 中的 Bootstrap 下拉選單

在 React 中開啟 Bootstrap 下拉選單

我們甚至可以通過將 variant 更改為 danger 來更改它的顏色。

現在我們將討論如何將列表中的值新增到下拉選單中。讓我們在 App.js 中建立一個列表。

# react
const list = [
    {
      Title: "Books",
      Id: "1"
    },
    {
      Title: "Movies",
      Id: "2"
    },
    {
      Title: "Comics",
      Id: "3"
    }
  ];

現在,讓我們將此列表傳遞給下拉選單。首先,我們需要對映這個列表。因此,我們在 App.js 中的程式碼將如下所示。

# react
<div className="App">
      <Dropdown onSelect={this.change}>
        <Dropdown.Toggle variant="info" id="dropdown-basic">
          Dropdown Menu
        </Dropdown.Toggle>
        <Dropdown.Menu>
          { list.map((item) => {
            return(
              <Dropdown.Item value={ item.Id }>{ item.Title }</Dropdown.Item>
            )
          }) }
        </Dropdown.Menu>
      </Dropdown>
    </div>

它將像這樣傳遞我們列表中的值和鍵。

輸出:

從 React 列表中 Bootstrap 下拉選單

從 React 列表中開啟 Bootstrap 下拉選單

這樣,我們就可以在 React 中建立一個 Bootstrap 下拉選單。

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn

相關文章 - React Dropdown