Question

此处将onSelect放入 MenuItem 或 DropdownButton 。

在这个简单的例子中，当用户选择menuitem时，它没有反映到下拉按钮中。

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

DropdownButton，来自＆＃34; react-bootstrap＆＃34;的MenuItem;

1 个答案: