Question

我正在使用react-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;

};

这是我的渲染器中的链接：

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

                        >

如果我使用整个状态更新方法，则必须单击两次按钮，因为单击链接后状态会更新，因此to没有最新信息（这很糟糕））。如果我将路径名中的checkInput函数作为条件表达式本身调用，它会通过链接进行渲染，并在用户输入信息时显示错误（烦人和不良），但在单击时起作用。关于如何基于单击时调用的函数有条件地设置路径名，我丢失了什么？

基于onClick函数返回的条件路径名（反应路由器dom）

0 个答案: