React Bootstrap：獲取下拉菜單寬度

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代碼。但是，當按鈕被渲染時運行，而不是菜單。React Bootstrap：獲取下拉菜單寬度

目前我正在使用的菜單正在擴展到窗口之外。我想獲得菜單本身的尺寸，所以我可以調整菜單的樣式以防止它在窗口外面延伸。

來源

2016-03-22 Heath

問題是菜單的尺寸和座標不存在，直到按下按鈕。不幸的是我找不到這樣做的反應方式。所以我想出了一個沒有反應的解決方案。

解決方案是將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樣式都會顯示在菜單上。

來源

2016-03-23 17:09:07 Heath

React Bootstrap：獲取下拉菜單寬度

回答

相關問題