javascript - Stoppa växlingen av dragspelsrubrik vid knappklick

Jag har följande bootstrap-accordion i min tsx. Jag vill förhindra att knappen triggar toggle.

<div id="accordion">
    <div className="card">
        <div className="card-header" 
            id={this.props.collapseID} 
            data-toggle="collapse" 
            data-target={this.props.dataTargetID} 
            aria-expanded="true" 
            aria-controls="collapseOne">
            <div className="clearfix">
                <h4 className="mb-0">
                    <a href={URL} target="_blank">
                        <strong>
                            Accordion Title
                        </strong>
                    </a>
                    <div className="statusCircle"></div>
                </h4>
                <div className="btn-grp">
                    <Button type="button" className="btn btn-primary" caption="Deploy All Links" onClick={this.onButtonClick} />
                </div>
            </div>
            <i className="collapseIcon fa fa-chevron-right fa-1x" aria-hidden="true"></i>
        </div>
        <div id={this.props.contentID} className="collapse show" aria-labelledby={this.props.collapseID} data-parent="#accordion">
            <div className="card-body">
                //Content
            </div>
        </div>
    </div>
</div>

Från vad jag har läst online måste du göra event.stopPropagation för att förhindra att händelsen bubblar upp. Därför skrev jag denna funktion för min knappkomponent:

onButtonClick = (event: Event) => {
    event.stopPropagation();
}

Men detta verkar inte stoppa växlingen. Inte heller gör stopImmediatePropagation och preventDefault

Svar #1

@zerodarkthirty, använd följande definition för din onClick:

 onClick={() => this.onButtonClick}