React Bootstrap-DropdownButton不起作用

Question

I started learning ReactJS a few weeks ago and I'm struggling with react bootstrap dropdown button.

Here's my code (simplified):

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);

I pasted the demo code found here: https://react-bootstrap.github.io/components/dropdowns/

My button is displayed but nothing happens, I'm using codesandbox to develop.

Thanks

Answer 1

I am not familiar with the react-bootstrap package. But it looks like you need a toggle function. How does it know to open the dropdown? I believe your dropdown component should have a isOpen or open prop and then set that prop to a state variable that changes in a toggle method.

Pseudo Code

state: {
  isOpen: false
} 

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

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

Perhaps someone with more insight on this package can provide more info. Hopefully this puts you in the right direction?... good luck :)