向 SurveyJS 评级组件添加额外的字段

编程问答 2022-05-03

问题描述

我们想为具有自定义值的 SurveyJS for React 中的评级组件添加一个额外的“N/A”和“不知道”按钮。因此，例如我们有值 1-2-3-4-5 和 N/A。选择此按钮时，最终状态的值应为“N/A”。

我们尝试的是添加渲染后函数：

var nvtratingAfterRender = function(question,el) {
  const parent = el.getElementsByClassName("sv_q_rating")[0];
  const newChild = parent.children[0].cloneNode(true);
  newChild.children[0].value = -99;
  newChild.getElementsByClassName("sv_q_rating_item_text")[0].innerText = "NVT";
  newChild.classList.add("nvt-option");
  parent.appendChild(newChild);
};

并将其添加到配置中。这会导致 React 不接受纯 HTML/JavaScript 按钮的错误：

Uncaught Error: ReactDOMInput: Mixing React and non-React radio inputs with the same `name` is not supported.

最后没有添加到状态中，也不可能让它“活跃”（下面我们在评级中添加了“NVT”）：

WaCHOwQgNj.gif

另一种方法可能是复制完整评级组件的 JavaScript 代码，然后添加一些额外的值（从 min 到 max 循环，但也添加额外的按钮）。

完成向参与组件的 rating 组件添加自定义按钮的好方法是什么？

解决方法

SurveyJS team 的回答：

你好，
为此，您可以使用 rateValues。这是 the working example 和 JSON：

{
    type: "rating",name: "satisfaction",title: "How satisfied are you with the Product?",rateValues: [
        1,2,3,4,5,{value: 'anyvalue',text: "NVT"}
    ]
}

谢谢，
安德鲁
SurveyJS 团队

javascriptreactjsreactjsreactjsreactjssurveyjs