javascript - 同一 React 组件中的多个下拉菜单不起作用

Question

我使用了 mdbootstrap https://mdbootstrap.com/docs/jquery/components/dropdowns/ 中的两个下拉菜单

但是两个下拉菜单都有相同的下拉菜单项，为什么会这样呢？在控制台 ->源中我可以看到不同的选项，但在显示时没有显示为什么会这样？在下面的屏幕截图中，您可以看到两者的下拉项都是相同的，为什么会发生这种情况？我无法调试它，因为在控制台 -> 源代码中它也显示购物、旅行等，但它没有在下拉列表中显示，为什么会这样？

代码:

import React from "react";
import "./transaction.css";

const Transaction = () => {
  return (
    <div className="transactionContainer">
      <h5 class="card-header info-color white-text text-center py-4">
        <strong>Transaction Information</strong>
      </h5>
      <div class="card">
        <div class="card-body px-lg-5 pt-0">
          <form class="text-center" style={{ color: "#757575" }} action="#!">
            <div class="md-form">
              <input type="text" id="amount" class="form-control" />
              <label for="amount">Amount</label>
            </div>

            <button
              class="btn btn-primary dropdown-toggle mr-4"
              type="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >
              Payment Method
            </button>

            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">
                Cash
              </a>
              <a class="dropdown-item" href="#">
                Debit/Credit Card
              </a>
              <a class="dropdown-item" href="#">
                Net Banking
              </a>
            </div>

            <button
              class="btn btn-primary dropdown-toggle mr-4"
              type="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >
              Category
            </button>

            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">
                Shopping
              </a>
              <a class="dropdown-item" href="#">
                Travel
              </a>
              <a class="dropdown-item" href="#">
                Entertainment
              </a>
            </div>

            <button
              class="btn btn-outline-info btn-rounded btn-block my-4 waves-effect z-depth-0"
              type="submit"
            >
              Add transaction
            </button>
          </form>
        </div>
      </div>
    </div>
  );
};

export default Transaction;

截图:

Answer 1

每个下拉菜单都需要包装在 div 中，其类为 dropdown，如下所示:

<div className="dropdown">
  <button
    class="btn btn-primary dropdown-toggle mr-4"
    type="button"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
  >
    Payment Method
  </button>

  <div id="menu1" class="dropdown-menu">
    <a class="dropdown-item" href="#">
      Cash
    </a>
    <a class="dropdown-item" href="#">
      Debit/Credit Card
    </a>
    <a class="dropdown-item" href="#">
      Net Banking
    </a>
  </div>
</div>