Почему происходит всплытие события?

Question

[uzi_no_uzi]

Имеется вот такой компонент (из него удалено все, что не относится к вопросу):

class PortfolioSectionPanel extends React.Component {

    constructor() {
        super();

        this.state = {
            showWorks: false,
        }

        this.showWorks = (e) => {
            e.stopPropagation();
            this.setState({
                showWorks: !this.state.showWorks,
            })
        }
    
    render() {
                               
        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;

Почему происходит всплытие события, хотя я его отменяю в функции?

В этой части кода происходит всплытие и функция showWorks отрабатывает кучу раз, ибо флаг showWorks в состоянии компонента отвечает за вызов этой же анимации, в итоге флаг все время перебивается, ведь ReactCSSTransitionGroup тоже вызывает анимацию. Выходит, что когда анимация в блоке закончилась, в этом блоке (className='portfolio-panel-background'), showWork стал true, но внутри есть еще ReactCSSTransitionGroups, по-видимому событие всплывает, и когда ReactCSSTransitionGroup срабатывает, опять же вызывается функция showWorks и ставит флаг в false, и так бесконечно

Как решить проблему?

Answer 1

[0xD34F]

Если не хотите, чтобы showWorks вызывалась, то отменять всплытие надо не в ней, а ниже. Цепляйте ещё один обработчик onTransitionEnd - к той ReactCSSTransitionGroup, чьи события не хотите обрабатывать.