React Bootstrap - DropdownButton не работает - PullRequest
Новая
       52

React Bootstrap - DropdownButton не работает

0 голосов
/ 04 декабря 2018

Я начал изучать ReactJS несколько недель назад, и я борюсь с выпадающей кнопкой реакции начальной загрузки.

Вот мой код (упрощенно): 

import React from "react";
import ReactDOM from "react-dom";
import { DropdownButton, MenuItem } from "react-bootstrap"
import "./bootstrap.min.css";
import "./bootstrap.min.js";

export const GameBoard = props => {
  return (
    <div className="gameBoard container-fluid">
      <div className="row">
        <div className="title text-center">
          <h5>Déroulement de la partie</h5>
          <hr />
        </div>
        <div className="menu">
          <DropdownButton bsStyle="primary" title="Toto" id="toto_0" key="0">
            <MenuItem eventKey="1">Action</MenuItem>
            <MenuItem eventKey="2">Another action</MenuItem>
            <MenuItem eventKey="3" active>Active Item</MenuItem>
            <MenuItem divider />
            <MenuItem eventKey="4">Separated link</MenuItem>
          </DropdownButton>
        </div>
      </div>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<GameBoard />, rootElement);

Я вставил найденный демонстрационный кодздесь: https://react -bootstrap.github.io / components / dropdowns /

Моя кнопка отображается, но ничего не происходит, я использую кодыandbox для разработки.

Спасибо

1 Ответ

0 голосов
/ 08 декабря 2018

Я не знаком с пакетом реакции-бутстрапом.Но, похоже, вам нужна функция переключения.Как он знает, чтобы открыть раскрывающийся список?Я полагаю, что ваш выпадающий компонент должен иметь isOpen или открытую подпорку, а затем установить эту подпорку в переменную состояния, которая изменяется в методе переключения.

Псевдокод 

state: {
  isOpen: false
} 

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

render() {
 const { isOpen } = this.state; 
  return ( 
    <Dropdown open={isOpen} toggle={this.toggle}>
      ...etc.

Возможно, кто-то, обладающий большим пониманием этого пакета, может предоставить больше информации.Надеюсь, это направит вас в правильном направлении? ... удачи :) 1006 *

...