React Bootstrap Dropdown <select>-like 行为答案

【问题标题】：React Bootstrap Dropdown <select>-like behaviorReact Bootstrap Dropdown <select>-like 行为
【发布时间】：2018-06-18 15:00:45
【问题描述】：

当用户单击 HTML <select> 元素时，它会根据其相对于窗口边缘的位置向上或向下下降。如果它太靠近底部，那么它会下降。如何从React Bootstrap's Dropdown component 获得相同的行为？

【问题讨论】：

检查他们的源代码，看看他们是如何实现的？

标签： twitter-bootstrap reactjs react-bootstrap

【解决方案1】：

（假设您指的是React-Bootstrap）

The docs 说要使用 dropup 属性作为下拉菜单的一部分。

<!-- example from docs -->

<ButtonToolbar>
  <SplitButton title="Dropup" dropup id="split-button-dropup">
    <MenuItem eventKey="1">Action</MenuItem>
    <MenuItem eventKey="2">Another action</MenuItem>
    <MenuItem eventKey="3">Something else here</MenuItem>
    <MenuItem divider />
    <MenuItem eventKey="4">Separated link</MenuItem>
  </SplitButton>
</ButtonToolbar>

【讨论】：

这将无条件退出。如果下拉将呈现在窗口的底部边缘下方，我需要该组件仅下拉。
啊，明白了。很抱歉对于这个误会。查看组件代码和文档，没有自动的方法可以做到这一点。如果您想手动执行此操作，您将检查下拉菜单的底部边框（在下拉菜单出现之前或之后），检查到bottom of the viewport 的距离，并查看下拉菜单是否超出视口。如果是这样，请添加 dropup 属性。否则，删除道具。