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函数传递给选定的值

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

在这种情况下,如果选择第一个选项,则打印" abc ",在第二个选项中,您可以看到也可以传入对象.

所以在你的代码中

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

我不确定你的默认值是什么意思,因为这不是一个选择 - 按钮文本是title属性中的任何内容.如果要处理默认值,可以在值为时设置值null.

Answer 2

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

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