javascript - 无法为我的排序方法创建下拉按钮

Question

下拉菜单不起作用。它始终显示为下拉状态。

我尝试过使用类似react-boostrap下拉菜单的东西；但这对我也不起作用。在这种情况下，按钮永远不会落下。我尝试降级我的react-bootstrap版本，但如果我这样做，我的代码就会崩溃。

import React from "react";
import './Brewery.css'
import { Link } from 'react-router-dom';
import { ButtonToolbar, DropdownButton, MenuItem } from 'react- 
bootstrap';


class Brewery extends React.Component {
   constructor(props) {
    super(props);
    this.state = {
      showMenu: false,
      breweries: [],
      isOpen: false
    }
  }

  componentDidMount() {
    fetch("https://api.openbrewerydb.org/breweries")
      .then(response => response.json())
      .then((data) => {
        this.setState({
          breweries: data,
        })
      })
  }

  toggleOpen = () => this.setState({ isOpen: !this.state.isOpen });

  sortAlpha() {
      const breweries = [...this.state.breweries.slice(0,10)].sort((a, b) => {
        if (a.name < b.name) return -1;
        if (a.name > b.name) return 1;
        return 0;
      });
      this.setState({ breweries: breweries });
    }

  sortRevAlpha() {
    const breweries = [...this.state.breweries.slice(0,10)].sort((a, b) => {
      if (a.name < b.name) return 1;
      if (a.name > b.name) return -1;
      return 0;
    });
    this.setState({ breweries: breweries });
  }

 render() {

   const { breweries } = this.state;

   return(
    <div className="main-container">
      <div className="banner" styles="background-image: linear-gradient(-225deg, rgba(0,101,168,0.6) 0%, rgba(0,36,61,0.6) 50%), url('http://bitterminnesotabrewerytours.com/wp-content/uploads/2014/02/boston-beer-tours-glass.jpg');">
        <div className="banner-content">
          <h1>Brewery</h1>
          <p>Find the best brewery in town</p>
        </div>
      </div>
      <div className="container">
      <div className="dropdown">
        <button
        className="btn btn-secondary dropdown-toggle"
        type="button"
        id="dropdownMenuButton"
        data-toggle="dropdown"
        aria-haspopup="true"
        onClick={this.toggleOpen}
        >
        Dropdown
        </button>
        <div aria-labelledby="dropdownMenuButton">
          <a className="dropdown-item" href="#nogo">
            Item 1
          </a>
          <a className="dropdown-item" href="#nogo">
            Item 2
          </a>
          <a className="dropdown-item" href="#nogo">
            Item 3
          </a>
        </div>
        </div>
        <div>
          <button onClick={() => this.sortAlpha()}>Sort Alphabetically</button>
          <button onClick={() => this.sortRevAlpha()}>Sort Rev Alphabetically</button>
        </div>
        <div className="row">
          {breweries.slice(0, 10).map((brewery, i) =>
            <div className="col-xs-12 col-sm-4" key={i}>
              <Link to={`/brewery/${ brewery.id }`}>
                <div className="card">
                  <div className="card-description">
                    <h2>{brewery.brewery_type}</h2>
                    <p>{brewery.city}, {brewery.state}</p>
                  </div>
                  <div className="card-category"><img src="https://img.icons8.com/color/20/000000/beer.png"/>  {brewery.name}</div>
                </div>
              </Link>
            </div>
          )}
        </div>
      </div>
    </div>
    )
  }
}

export default Brewery;

Answer 1

我还没有设置路由器并在本地测试所有内容，但是当我将其粘贴到我的IDE中时，它显示在您从未实际使用的代码中:

从 'react-bootstrap' 导入 { ButtonToolbar, DropdownButton, MenuItem };

编辑:

删除了一些东西并引入了react-bootstrap。工作得很好。

import React from "react";
import { ButtonToolbar, DropdownButton, MenuItem } from "react-bootstrap";

export class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showMenu: false,
      breweries: []
    };
  }

  componentDidMount() {
    fetch("https://api.openbrewerydb.org/breweries")
      .then(response => response.json())
      .then(data => {
        this.setState({
          breweries: data
        });
      });
  }

  sortAlpha() {
    const breweries = [...this.state.breweries.slice(0, 10)].sort((a, b) => {
      if (a.name < b.name) return -1;
      if (a.name > b.name) return 1;
      return 0;
    });
    this.setState({ breweries: breweries });
  }

  sortRevAlpha() {
    const breweries = [...this.state.breweries.slice(0, 10)].sort((a, b) => {
      if (a.name < b.name) return 1;
      if (a.name > b.name) return -1;
      return 0;
    });
    this.setState({ breweries: breweries });
  }

  render() {
    const { breweries } = this.state;

    return (
      <div className="main-container">
        <div
          className="banner"
          styles="background-image: linear-gradient(-225deg, rgba(0,101,168,0.6) 0%, rgba(0,36,61,0.6) 50%), url('http://bitterminnesotabrewerytours.com/wp-content/uploads/2014/02/boston-beer-tours-glass.jpg');"
        >
          <div className="banner-content">
            <h1>Brewery</h1>
            <p>Find the best brewery in town</p>
          </div>
        </div>
        <div className="container">
          <ButtonToolbar>
            <DropdownButton
              bsSize="small"
              title="Small button"
              id="dropdown-size-small"
            >
              <MenuItem eventKey="1">Action</MenuItem>
              <MenuItem eventKey="2">Another action</MenuItem>
              <MenuItem eventKey="3">Something else here</MenuItem>
              <MenuItem divider />
              <MenuItem eventKey="4">Separated link</MenuItem>
            </DropdownButton>
          </ButtonToolbar>
        </div>
        <div>
          <button onClick={() => this.sortAlpha()}>Sort Alphabetically</button>
          <button onClick={() => this.sortRevAlpha()}>
            Sort Rev Alphabetically
          </button>
        </div>
        <div className="row">
          {breweries.slice(0, 10).map((brewery, i) => (
            <div className="col-xs-12 col-sm-4" key={i}>
              <div className="card">
                <div className="card-description">
                  <h2>{brewery.brewery_type}</h2>
                  <p>
                    {brewery.city}, {brewery.state}
                  </p>
                </div>
                <div className="card-category">
                  <img src="https://img.icons8.com/color/20/000000/beer.png" />{" "}
                  {brewery.name}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

请确保在 /public 中的index.html 底部添加引导CSS 的链接，否则react-bootstap 将无法工作。它只是一个包装器。

// shortened to show code needed
  <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />
  </body>

这是它的工作原理: