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>

在这种情况下，如果您选择第一个选项，＆＃39; abc ＆＃39;打印，在第二个选项中，您可以看到也可以传入对象。

所以在你的代码中

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)
},

Answer 3

您可能想要使用FormControl＆gt;＆gt;为您的案例选择组件：

indexify'

Answer 4

您应该按如下所示更改handleSelect签名（在Component Class中）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
    <nav>
       <a href="#1">1</a>
       <a href="#2">2</a>
       <a href="#3">3</a>
    </nav>
</div>

<div id="1" class="navLinks"> content 1 </div>
<p>Some dummy paragraph that's trying to break our index count :)</p>
<div id="2" class="navLinks"> content 2 </div>
<div id="3" class="navLinks"> content 3 </div>

要设置默认值，您需要使用handleSelect = (evtKey, evt) => { // Get the selectedIndex in the evtKey variable }

上的title道具

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

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

4 个答案: