DropdownButton, MenuItem from "react-bootstrap";

Question

Here where to put the onSelect into the MenuItem or into the DropdownButton.

In this simple example when user select menuitem its not reflected into the dropdownbutton.

Is there any example on onSelect or onChange ?

<div className="select_option">
    <label htmlFor="type">Document Desc</label>
    <DropdownButton title="--Select One--" id="document-type">
        <MenuItem>Item 1</MenuItem>
        <MenuItem>Item 2</MenuItem>
        <MenuItem>Item 3</MenuItem>
        <MenuItem>Item 4</MenuItem>
    </DropdownButton>
</div>

Please update your title to reflect your question. – jkdba May 07 '18 at 18:36 — jkdba, May 07 '18 at 18:36

score 7 · Accepted Answer · answered May 07 '18 at 17:39

So you try to create a controlled select from a dropdown. You will need a options list and a state.

Here is an example:

const options = ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"];

class MySampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: options[0] // default selected value
    };
  }

  handleSelect(eventKey, event) {
    this.setState({ selectedOption: options[eventKey] });
  }

  render() {
    <div className="select_option">
      <label htmlFor="type">Document Desc</label>
      <DropdownButton
        title={this.state.selectedOption}
        id="document-type"
        onSelect={this.handleSelect.bind(this)}
      >
        {options.map((opt, i) => (
          <MenuItem key={i} eventKey={i}>
            {opt}
          </MenuItem>
        ))}
      </DropdownButton>
    </div>;
  }
}

DropdownButton, MenuItem from "react-bootstrap";

1 Answers1