Question

几周前我开始学习ReactJS，我在挣扎着React bootstrap下拉按钮。

这是我的代码（简体）：

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/

显示了我的按钮，但是什么也没有发生，我正在使用codeandbox进行开发。

谢谢

Answer 1

我对react-bootstrap软件包不熟悉。但看起来您需要一个切换功能。如何知道打开下拉菜单？我相信您的下拉组件应该具有isOpen或open属性，然后将该属性设置为在toggle方法中更改的状态变量。

伪代码

state: {
  isOpen: false
} 

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

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

也许对此软件包有深入了解的人可以提供更多信息。希望这会把您带向正确的方向？...祝你好运：）

React Bootstrap-DropdownButton不起作用

1 个答案: