DropdownButton, MenuItem 来自“react-bootstrap”；

【问题标题】：DropdownButton, MenuItem from "react-bootstrap";DropdownButton, MenuItem 来自“react-bootstrap”；
【发布时间】：2018-05-07 17:15:28
【问题描述】：

将 onSelect 放入 MenuItem 或 DropdownButton 的位置。

在这个简单的示例中，当用户选择菜单项时，它不会反映到下拉按钮中。

onSelect 或 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>

【问题讨论】：

请更新您的标题以反映您的问题。

标签： reactjs react-bootstrap react-boilerplate

【解决方案1】：

因此，您尝试从下拉列表中创建受控选择。您将需要一个选项列表和一个状态。

这是一个例子：

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

【讨论】：