Условный путь на основе возврата функции onClick (реагирует на маршрутизатор dom) - PullRequest
Новая
       5

Условный путь на основе возврата функции onClick (реагирует на маршрутизатор dom)

0 голосов
/ 22 января 2019

Я использую Компонент Связи от Reaction-router-dom. Когда пользователь нажимает на мою ссылку, я хочу выполнить серию проверок, чтобы убедиться, что на странице есть действительные данные. В зависимости от того, пройдены ли эти проверки, я хочу, чтобы страница либо оставалась на месте, либо перешла на страницу подтверждения, где моя база данных получает только правильные данные. Я пробовал несколько разных подходов, так что простите за повторяющийся код. Вот моя функция проверки ввода: 

checkInput = (e) => {
    // e.preventDefault();
    const { campaignName, selectedSocial } = this.state;
    const { history } = this.props;
    const { showError } = this.props;
    if (isEmpty(campaignName)) {
        return showError('Enter campaign name');
    }

    if (isEmpty(selectedSocial)) {
        return showError('Enter social media platform');
    }

    if (!this.state.logoId && this.state.overlay){
        return showError('Please upload a logo image in your account settings')
    }

    if (!this.state.website && this.state.appendUrl){
        return showError('Please enter a website in your account settings')
    }

    this.setState({
        passChecks: true
    })

    return true;

};

и вот ссылка в моем Render: 

<Link onClick={this.checkInput}
                            to={{
                                pathname:
                                    this.state.passChecks == true
                                        ? '/campaigns/scheduleeditcampaigns'
                                        : '/campaigns/setup',
                                state: {
                                    campaignName,
                                    color,
                                    selectedSocial,
                                    selectedCampaign,
                                    appendUrl,
                                    overlay
                                }
                            }}

                        >

Если я использую весь подход к обновлению состояния, мне нужно дважды нажать кнопку из-за обновления состояния после нажатия на ссылку, поэтому у to нет актуальной информации (что отстает по многим причинам ). Если я вызываю функцию checkInput в имени пути как само условное выражение, она отображается с помощью ссылки и показывает ошибки, когда пользователь вводит информацию (надоедливую и плохую), но работает по щелчку. Чего мне не хватает в том, чтобы условно установить путь на основе функции, вызываемой по клику?

...