DropdownButton, MenuItem из "реакции-начальной загрузки";

Question

Здесь, куда поместить 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>

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