javascript - react 引导: Get drop down menu width

Question

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

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 .我尝试在 componentDidMount 函数中使用此 getDOMNode 代码。但它是在呈现按钮时运行的，而不是菜单时运行的。

Answer 1

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

解决办法是给按钮添加一个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 样式都会显示在菜单上。