Question

我有一个bootstrap可折叠面板，我在标题中有3个控制图标图标，我想用来调用外部函数，但点击面板标题中的任何内容都可以切换折叠功能。

有没有办法在最后隔离图标，以免它们触发面板崩溃？

我正在使用react.js和react-bootatrap。

var header = (
            <span>

                        {this.props.ticker.name}

                    <ButtonGroup bsSize="xsmall">
                        <OverlayTrigger placement="top" overlay={<Popover id='Delete Stored Ticker'>Save stored ticker <strong>{this.props.ticker.name}</strong> from <strong>{this.props.ticker.area}</strong></Popover>} delayShow={500}>
                            <Button onClick={this._saveTicker}><Glyphicon glyph="floppy-disk"/></Button>
                        </OverlayTrigger>

                        <OverlayTrigger placement="top" overlay={<Popover id='Delete Stored Ticker'>Save ticker as: <strong>{this.props.ticker.name}</strong> from <strong>{this.props.ticker.area}</strong></Popover>} delayShow={500}>
                            <Button><Glyphicon glyph="floppy-save"/></Button>
                        </OverlayTrigger>

                        <OverlayTrigger placement="top" overlay={<Popover id='Delete Stored Ticker'>Delete stored ticker <strong>{this.props.ticker.name}</strong> from <strong>{this.props.ticker.area}</strong></Popover>} delayShow={500}>
                            <Button onClick={this._deleteTicker}><Glyphicon glyph="trash"/></Button>
                        </OverlayTrigger>
                    </ButtonGroup>
            </span>
        );

        return (
            <Panel id={this.props.ticker.id} collapsible header={header} className="storedTickerFiles">
                <ListGroup fill>
                    {items}
                </ListGroup>
            </Panel>
        );

Answer 1

在Button onClick回调函数中，试试这个

_callback(e){ e.stopPropagation(); }

引导面板与标题中的图标

1 个答案: