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

时间：2018-12-20 19:46:30

标签： javascript reactjs

下拉菜单无效。它一直显示为下拉。

我尝试使用诸如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;

2 个答案:

答案 0 :(得分：1)

我还没有完成设置Router并在本地测试所有内容的过程，但是当我将其粘贴到我的IDE中时，它表明在您从未实际使用的代码中：

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

编辑：

删除了一些内容并引入了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>

这在起作用吗？

enter image description here

答案 1 :(得分：0)

您似乎实际上并没有使用 <EventCard openEditEvent = this.openEditEvent openEventDetail={() => this.openEventDetail(item)} openDeleteEventAlert={() => this.openDeleteEventAlert(item)} {...item} />} 。您的render() { var openEditEvent = this.props.openEditEvent; return ( <Card> <EventCardHeader eventOrganiserImage={this.props.eventOrganiserImage} eventVenue={this.props.eventVenue} openEditEvent = openEditEvent /> <EventCardBody openEventDetail={() => this.props.openEventDetail()} imageDownloadUrl={this.props.imageDownloadUrl} /> <EventCardFooter openEventDetail={() => this.props.openEventDetail()} eventName={this.props.eventName} eventStartDate={this.props.eventStartDate} eventVenue={this.props.eventVenue} eventAddressLine1={this.props.eventAddressLine1} eventAddressLine2={this.props.eventAddressLine2} /> </Card> ); } 方法可对其进行切换，但我认为您需要将该this.state.isOpen值连接至菜单。

最终，您必须决定要在哪里，但是我以前使用的一种解决方案是将其放在您的啤酒厂toggleOpen之前，这样啤酒厂列表将仅在{{1} }是真的：

this.state.isOpen

此外，由于您已经在map方法的顶部解构了isOpen，所以我可能会保持一致并拔出{ this.state.isOpen && breweries.slice(0, 10).map( // the rest of your code block here. ，然后删除{{ 1}}中的this.state检查。

如果您有任何疑问，请告诉我。

相关问题
最新问题