Как отключить всплытие событий в React?

return( 
 
    <div className='portfolio-panel' id='porfolioPanel' ref={this.props.link}> 
        <div className='portfolio-panel-background' ref={this.props.linkCircle} onTransitionEnd={this.showWorks} > 
            <ReactCSSTransitionGroup 
                transitionName='portfolio-panel__information' 
                transitionEnterTimeout={500} 
                transitionLeaveTimeout={500}> 
                    {middleElementCircle} 
            </ReactCSSTransitionGroup> 
            <div style={diskStyle} className='portfolio-panel-disk' id='portfolio-panel-disk'> 
                <ReactCSSTransitionGroup 
                transitionName='work-item' 
                transitionEnterTimeout={500} 
                transitionLeaveTimeout={500}> 
                    {workItems} 
                </ReactCSSTransitionGroup> 
            </div> 
        </div> 
    </div> 
)

import React from 'react'; 
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 
 
import WorkItem from '../WorkItem'; 
 
class PortfolioSectionPanel extends React.Component { 
 
    constructor() { 
        super(); 
 
        this.state = { 
            showWorks: false, 
            wheelAngleinDeg: 0, 
            counterActiveType: 0, 
            works: [ 
                { 
                    type: 'Веб-разработка', 
                    link: 'some', 
                    text: 'Закажите веб-разработку' 
                }, 
                { 
                    type: 'Копирайтинг', 
                    link: 'some', 
                    text: 'Закажите копирайтинг' 
 
                }, 
                { 
                    type: 'Продвижение', 
                    link: 'some1', 
                    text: 'Закажите продвижение' 
                }, 
                { 
                    type: 'Скриптинг', 
                    link: 'some', 
                    text: 'Закажите скриптинг' 
                }, 
                { 
                    type: 'Веб-дизайн', 
                    link: 'some1', 
                    text: 'Закажите веб-дизайн' 
                }, 
                 
            ], 
        } 
 
        this.showWorks = (e) => { 
            e.stopPropagation(); 
            this.setState({ 
                showWorks: !this.state.showWorks, 
            }) 
        } 
 
        this.countActiveType = (direction) => { 
            if(direction == 'left') { 
                if(this.state.counterActiveType == this.state.works.length - 1) { 
                    this.setState({ 
                        counterActiveType: 0, 
                    }) 
                } else { 
                    this.setState({ 
                        counterActiveType: this.state.counterActiveType + 1, 
                    }) 
                } 
 
                 
                 
            } else { 
                if(this.state.counterActiveType == 0) { 
                    this.setState({ 
                        counterActiveType: this.state.works.length - 1, 
                    }) 
                } else { 
                    this.setState({ 
                        counterActiveType: this.state.counterActiveType - 1, 
                    }) 
                } 
                 
            } 
 
            console.log(this.state.counterActiveType) 
        } 
 
        this.angleInDeg = 360 / this.state.works.length; 
         
 
    } 
     
    render() { 
 
 
        //Расположение кругов 
        let workItems; 
 
        if(this.state.showWorks) { 
            let {works} = this.state; 
 
            const angleRad = 360 / works.length * 0.017; //Частота кругов в радианах 
            const bg = document.getElementById('portfolio-panel-disk'); 
            let radius; 
            if(bg) { 
                radius = parseInt(getComputedStyle(bg).width) / 2; 
            } 
 
            workItems = works.map((currentValue, index) => { 
                return <WorkItem  
                        type={currentValue.type}  
                        link={currentValue.link}  
                        key={index + 50}  
                        leftOffset={radius - radius * Math.cos(angleRad * index)} 
                        topOffset={radius - radius * Math.sin(angleRad * index)} 
                        angle={-this.state.wheelAngleinDeg}  /> 
            }) 
        } else { 
            workItems = null; 
        } 
 
        let diskStyle = { 
            transform: `translate(-50%,-50%) rotate(${this.state.wheelAngleinDeg}deg)`, 
        }; 
 
        //Элементы внутри круга 
 
        let middleElementCircle; 
         
        if(this.state.showWorks) { 
            middleElementCircle = <div className='portfolio-panel__information'> 
                <h3 className='portfolio-panel__title'> 
                    <a href='#'> 
                        {this.state.works[this.state.counterActiveType].type} 
                    </a> 
                </h3> 
                <p className='portfolio-panel__description'> 
                    {this.state.works[this.state.counterActiveType].text} 
                </p> 
                <div className='portfolio-panel__navigation'> 
                    <svg onClick={() => {this.setState({wheelAngleinDeg: this.state.wheelAngleinDeg - this.angleInDeg}); this.countActiveType('left')}} className='portfolio-panel__arrow portfolio-panel__arrow--perv'> 
                        <use xlinkHref='img/icons/sprite.svg#arrow-left' /> 
                    </svg> 
                    <div className='portfolio-panel__share'>/</div> 
                    <svg onClick={() => {this.setState({wheelAngleinDeg: this.state.wheelAngleinDeg + this.angleInDeg}); this.countActiveType('right')}} className='portfolio-panel__arrow portfolio-panel__arrow--perv'> 
                        <use xlinkHref='img/icons/sprite.svg#arrow-right' /> 
                    </svg> 
                </div> 
            </div>  
        } else { 
            middleElementCircle = null 
        } 
                                     
          
 
        return( 
 
            <div className='portfolio-panel' id='porfolioPanel' ref={this.props.link}> 
                <div className='portfolio-panel-background' ref={this.props.linkCircle} onTransitionEnd={(e) => {this.showWorks(e); console.log(1)}} > 
                    <ReactCSSTransitionGroup 
                        transitionName='portfolio-panel__information' 
                        transitionEnterTimeout={500} 
                        transitionLeaveTimeout={500}> 
                            {middleElementCircle} 
                    </ReactCSSTransitionGroup> 
                    <div style={diskStyle} className='portfolio-panel-disk' id='portfolio-panel-disk'> 
                        <ReactCSSTransitionGroup 
                        transitionName='work-item' 
                        transitionEnterTimeout={500} 
                        transitionLeaveTimeout={500}> 
                            {workItems} 
                        </ReactCSSTransitionGroup> 
                    </div> 
                </div> 
            </div> 
        ) 
    } 
} 
     
 
export default PortfolioSectionPanel;