来自 "react-bootstrap" 的 DropdownButton、MenuItem；

Question

此处将 onSelect 放入 MenuItem 或 DropdownButton。

在这个简单的示例中，当用户 select 菜单项未反映到下拉按钮中时。

有关于 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>

Answer 1

所以您尝试从下拉菜单中创建一个受控的 select。您将需要一个选项列表和一个状态。

这是一个例子：

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

来自 "react-bootstrap" 的 DropdownButton、MenuItem；

DropdownButton, MenuItem from "react-bootstrap";

reactjs

react-bootstrap

react-boilerplate