Как остановить распространение только при событии клика в компоненте React Toast - PullRequest
Новая
       103

Как остановить распространение только при событии клика в компоненте React Toast

0 голосов
/ 30 мая 2020

toastify 'в моем проекте реакции после связи с сервером. Я создал собственный элемент, который отображается как сообщение. Он состоит из текста и кнопки.

Custom toast

Код выглядит так: 

...
    /**
     * Submit action after clicking
     * @param {event} e
     */
    submitButton(e) {
        e.stopPropagation();
        this.setState({showDetails: true});
    }

    /**
     * Base render method
     * @return {*}
     */
    render() {
        return (
            <div className={'d-flex flex-column'}>
                <div className={'d-flex justify-content-between'}>
                    {this.props.message}
                    <div className={'mr-2'}>
                        <Button variant={'info'} onClick={(e) => this.submitButton(e)}> ? </Button>
                    </div>
                </div>
                <div className={`${this.state.showDetails ? '' : 'd-none'}`}>
                    <p>
                        {this.props.detail}
                    </p>
                </div>
            </div>
        );
    }

Моя проблема: когда я обычно нахожусь на тосте он перестает считать время, чтобы скрыть компонент тоста. Но после того, как я нажму на свою пользовательскую кнопку внутри и использую e.stopPropagation, coundown снова начинает работать и не хочет останавливаться. Мне нужно остановить это поведение и остановить таймер при нажатии? кнопка. Как мне это сделать?

...