React Bootstrap - DropdownButton不工作

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/

我的按钮显示了，但没有任何反应，我正在使用codesandbox进行开发。

谢谢

Answer 1

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

伪码

state: {
  isOpen: false
} 

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

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

也许对这个包有更多见解的人可以提供更多的信息。希望这能让你找到正确的方向？祝你好运:)