使用react-bootstrap进行多重下拉

Question

因此，我想在另一个dropdown中包含一个dropdown，但我似乎无法让pullright做出反应。列表项是按钮，我使用CSS使其看起来像菜单项。列表中的每个项目都是一个组件按钮。

reactjs

<ButtonGroup bsSize="small" className="my-custom-class">
                <div style={{ display: 'inline-block' }}>
                    <Dropdown bsStyle="default" bsSize="small" id="actions" onSelect={this.handleOnSelect}>
                        <Dropdown.Toggle bsStyle="default">
                            Actions
                        </Dropdown.Toggle>
                        <Dropdown.Menu> 
                            {props.insertBtn}
                            {props.deleteBtn}
                            <Actions
                                activeUser={activeUser}
                                id={fetch_commsmatrix.id} 
                                fetch_commsmatrix={fetch_commsmatrix} 
                                priv={priv} 
                                updateStatuses={this.updateStatuses.bind(this)} 
                                options={this.options} 
                                passRefreshBack={this.passRefreshBack}/>
                                <DownloadButton onSelect={this.updateExportOpts.bind(this)} selectedRowKeys={selectedRowKeys} /> 

                        </Dropdown.Menu>
                    </Dropdown>
                </div>

            </ButtonGroup>

css

.deleteBtn > span > i.glyphicon, .insertBtn > span > i.glyphicon {
    display: none;
}
.setStatusBtn, .insertBtn, .deleteBtn, .refreshBtn, .freezeBtn, .implementationSubmitBtn, .implementationCancelBtn, #downloadBtn{
    display: block;
    width: 100%;
    text-align: left;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333 !important;
    white-space: nowrap;
    background-color: transparent !important;
    margin-left: 0px !important;
    border-radius: 0px
}

.insertBtn:hover, .deleteBtn:hover, .refreshBtn:hover, .freezeBtn:hover, .implementationSubmitBtn:hover, .implementationCancelBtn:hover, .setStatusBtn:hover, #downloadBtn:hover {
    background-color: #e8e8e8;
    background-image: -webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);
    background-image: -o-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#e8e8e8));
    background-image: linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
    background-repeat: repeat-x;
}

.implementationSubmitBtn[disabled], .implementationCancelBtn[disabled]{
    border: 0px;
}

上面的

html 输出是

<div style="display: inline-block;"><div class="dropdown open btn-group btn-group-sm btn-group-default"><button id="actions" role="button" aria-haspopup="true" aria-expanded="true" type="button" class="dropdown-toggle btn btn-default">Actions <span class="caret"></span></button><ul role="menu" class="dropdown-menu" aria-labelledby="actions"><button type="button" class="btn  react-bs-table-add-btn insertBtn"><span><i class="fa glyphicon "></i> New</span></button><button type="button" class="btn  react-bs-table-del-btn deleteBtn"><span><i class="fa glyphicon "></i> Delete</span></button><button type="button" class="btn refreshBtn">Force Re-Analyze</button><button type="button" class="btn freezeBtn">Freeze</button><button type="button" class="btn setStatusBtn">Set Status</button><div class="dropdown btn-group btn-group-sm btn-group-default"><button id="downloadBtn" role="button" aria-haspopup="true" aria-expanded="false" type="button" class="dropdown-toggle btn btn-default">Download <span class="caret"></span></button><ul role="menu" class="dropdown-menu dropdown-menu-right" aria-labelledby="downloadBtn"><li role="presentation" class=""><a role="menuitem" tabindex="-1" href="#">Approved</a></li><li role="presentation" class=""><a role="menuitem" tabindex="-1" href="#">Requires Analysis</a></li><li role="presentation" class=""><a role="menuitem" tabindex="-1" href="#">All</a></li><li role="presentation" class=""><a role="menuitem" tabindex="-1" href="#">Aggregate Flows</a></li><li role="presentation" class=""><a role="menuitem" tabindex="-1" href="#">Selected</a></li></ul></div></ul></div></div>