【问题标题】:SurveyJS : Disabling the automatic Thank You Message in ReactSurveyJS:在 React 中禁用自动感谢消息
【发布时间】:2019-10-03 14:27:47
【问题描述】:

我使用survey-react (https://www.npmjs.com/package/survey-react) 对我们的react 应用程序实施了SurveyJs (https://surveyjs.io) 调查。一切正常,但是当提交调查时,我们正在使用 axios 将数据发布到数据库,并接收来自 API 的回复(无论成功与否。

问题是我已经在模式中实施了调查,surveyjs 似乎有一个“谢谢”页面,我找不到禁用的方法。所以当我提交时,我有一个组件重新渲染两次(默认的感谢页面和我的 API 成功/失败响应)。我可以通过在 JSON 文件上使用“completedHtml”来覆盖文本,但我无法禁用它。问题是,即使我用“Processig Survey ...”之类的东西覆盖它,模态上的跳转看起来也不好。

我的模式代码:

<Dialog
                open={dialogOpen}
                onClose={handleClose}
                aria-labelledby="Your Opinion Matters"
                aria-describedby="Short Customer Survey"
                className={classes.modal}
            >
                <DialogTitle id="alert-dialog-title" onClose={handleClose}>
                    {(status === '') ?
                        `We would like to hear from you`
                        :
                        `Thank You`
                    }
                </DialogTitle>
                <DialogContent>
                    {surveyActive ?
                        <Survey.Survey model={model} onComplete={onComplete} />
                        :
                        <span style={{fontSize: '1.5em', color: '#999'}}>{status}</span>
                    }
                </DialogContent>
                {(status !== '') &&
                <DialogActions>
                    <Button variant="contained" onClick={handleClose} color="primary">
                        Close
                    </Button>
                </DialogActions>
                }
            </Dialog>

我的调查 API 调用和处理:

const setSurveyData = (data, options) => {
    const authToken = sessionStorage.token;

    return axios({
        method: 'post',
        url: '/users/survey',
        headers: {
            'Authorization': `Bearer ${authToken}`,
        },
        data: {
            survey: data
        }
    })
        .then(res => {
            const data = res.data;
            setStatus(data.msg);
             setSurveyActive(false);
        })
        .catch(err => {
            catchAxios(err);
        })
};

// run on survey complete
const onComplete = (survey, options) => {
    return setSurveyData(survey.data, options)
};

const handleOpen = () => {
    setDialogOpen(true);
    setSurveyActive(true);
};

const handleClose = () => {
    setDialogOpen(false);
    setStatus('');
};

我已经看了大约 5 个小时,然后画了一个空白……我已经尝试了所有我能想到的东西。任何帮助将非常感激。谢谢。

PS:忘了提到我已经尝试通过 JSON 将 showCompletedPage 参数传递为 false,但是,由于调查是在模态上的,它仍然显示模态标题(并且只有标题),这更糟。

【问题讨论】:

  • 通常,当我在这里发帖时,我会在几分钟内找到解决方案。为了将来参考,我所做的是控制 API 响应中的模式打开。这是非常愚蠢和简单的,但正在传递给我,onComplete 将关闭对话框,然后在 API 响应进来后我重新打开它。愚蠢的我! :)

标签: javascript reactjs survey surveyjs


【解决方案1】:

您需要将调查的showCompletedPage 设置为false。

【讨论】:

  • 感谢 TSV 的回复,是的,我试过了,但是我没有回复我正在使用的代码,我在 Survey.JS 中寻找解决方案,但我的问题出在我自己的代码上结构体。不过还是谢谢。
猜你喜欢
  • 2015-06-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-12-17
相关资源
最近更新 更多