React-bootstrap如何获取下拉列表的值

Question

我想出了如何使用 react-bootstrap 来显示下拉列表：

<DropdownButton bsStyle="success" title="Choose" onSelect={this.handleSelect} >
    <MenuItem key="1">Action</MenuItem>
    <MenuItem key="2">Another action</MenuItem>
    <MenuItem key="3">Something else here</MenuItem>
</DropdownButton>

但是我应该如何编写 onSelect 的处理程序来捕获被选中的选项？我试过这个但不知道里面写什么：

handleSelect: function () {
    // what am I suppose to write in there to get the value?
},

另外，有没有办法设置默认选择的选项？

谢谢！

Answer 1

onSelect 函数传递了 selected 值

<DropdownButton title='Dropdowna' onSelect={function(evt){console.log(evt)}}>
  <MenuItem eventKey='abc'>Dropdown link</MenuItem>
  <MenuItem eventKey={['a', 'b']}>Dropdown link</MenuItem>
</DropdownButton>

在这种情况下，如果你 select 第一个选项，'abc' 被打印出来，在第二个选项中你可以看到一个对象也可以传入.

所以在你的代码中

handleSelect: function (evt) {
    // what am I suppose to write in there to get the value?
    console.log(evt)
},

我不确定默认值是什么意思，因为这不是 select - 按钮文本是 title 属性中的任何内容。如果您想处理默认值，您可以在值为 null.

时设置一个值

Answer 2

你忘了提到 eventKey 作为第二个参数传递，这是获取你点击的值的正确形式：

handleSelect: function (evt,evtKey) {
    // what am I suppose to write in there to get the value?
    console.log(evtKey)
},

Answer 3

您可能想为您的情况使用 FormControl >> select 组件：

  <FormControl componentClass="select" placeholder="select">
        <option value="select">select</option>
        <option value="other">...</option>
  </FormControl>

Answer 4

您应该如下更改 handleSelect 签名（在组件 Class 内）：

handleSelect = (evtKey, evt) => {
    // Get the selectedIndex in the evtKey variable
}

要设置默认值，您需要在 DropdownButton

上使用 title 属性

参考：https://react-bootstrap.github.io/components/dropdowns/

React-bootstrap如何获取下拉列表的值

React-bootstrap how to capture the value of dropdown list

reactjs

react-bootstrap