React Bootstrap：获取下拉菜单宽度

Question

在下面的代码中，如何确定单击按钮时出现的菜单的尺寸？目前我正在使用的菜单扩展到 Window 之外。我想获取菜单本身的尺寸，以便我可以调整菜单的样式以防止它延伸到 window.

之外

render: function () {
            return<BS.DropdownButton title={this.props.title} style={this.state.buttonStyle}>
                <span ref="ddMenu">{this.props.children}</span>
            </BS.DropdownButton>
        }

我试过在 ddMenu 上使用 ref 和 getDOMNode().getBoundingClientRect()，但尺寸和坐标始终为 0。我试过使用此 getDOMNode 代码在 componentDidMount 函数中。但是当按钮呈现时运行，而不是菜单。

Answer 1

问题是在按下按钮之前，菜单的尺寸和坐标不存在。不幸的是，我找不到这样做的反应方式。所以我想出了一个 none 反应解决方案。

解决方法是给按钮添加一个onClick。在调用的函数中，添加 window.setTimeout 设置为 1 毫秒。原因：菜单没有立即出现，setTimeout 给你足够的时间等待菜单出现。然后就可以运行 this.refs.ddMenu.getDOMNode().parentNode了。如果你不添加parentNode，你只会得到你添加到菜单中的元素，而不是菜单本身。获得菜单后，您可以运行 getBoundingClientRect() 获取菜单尺寸和坐标。

render: function () {
            return<bs.DropdownButton title={this.props.title} onClick={this.getMenu}>
                <div ref="ddMenu">{this.props.children}</div>
            </bs.DropdownButton>
        }

getMenu: function(){
  window.setTimeout(function(){
    var dropMen = this.refs.ddMenu.getDOMNode().parentNode;
  }, 1);
}

dropMen 会给你菜单。 dropmen.getBoundingClientRect() 将为您提供菜单的尺寸和坐标。添加到 dropMen 的任何 css 样式都会显示在菜单上。

Answer 2

克服这个问题的一种方法是使用 drop directions and menu align 中提到的 React-Bootstrap Docs.Changing 下拉菜单的方向和对齐方式有助于我防止掉落向下菜单扩展 window.

React Bootstrap：获取下拉菜单宽度

React Bootstrap: Get drop down menu width

html

javascript

react-bootstrap