Question

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

在上面的代码中。如何确定上述菜单的尺寸？不是按钮的尺寸，而是单击按钮时显示的菜单。我尝试在ddMenu上使用带getDOMNode（）。getBoundingClientRect（）的ref，但是尺寸和坐标始终为0.我尝试在componentDidMount函数中使用此getDOMNode代码。但是在渲染按钮时会运行，而不是菜单。

目前我正在使用的菜单是在Window外部扩展的。我想获得菜单本身的尺寸，以便我可以调整菜单的样式，使其不会延伸到窗外。

Answer 1

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

解决方案是在按钮上添加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

克服此问题的一种方法是使用ReactBootstrap Docs中提到的drop directions和menu align。更改方向和下拉菜单的对齐方式有助于防止掉线下拉菜单扩展窗口。

React Bootstrap：获取下拉菜单宽度

2 个答案: