如何解决在功能组件中实现 tagbox 小部件
我一直致力于使用功能组件在 reactjs 中创建surveyjs 表单。其他一切都非常适合,但问题在于restfull tagBox 小部件。
有一个很好的例子可以在类组件 https://codesandbox.io/s/ljnh1 中使用它,但我很难将其转换为功能组件。
你的任何帮助都会很棒 谢谢
解决方法
您可以将所有静态初始化移动到组件外:
import React,{ Component } from "react";
import $ from "jquery";
import select2Init from "select2";
import "select2/dist/css/select2.min.css";
import * as Survey from "survey-react";
import * as widgets from "surveyjs-widgets";
import "survey-react/modern.css";
import "./index.css";
Survey.StylesManager.applyTheme("modern");
window["$"] = window["jQuery"] = $;
select2Init();
widgets.select2(Survey);
widgets.select2tagbox(Survey);
class SurveyComponent extends Component {
render() {
const json = {
elements: [
{
type: "tagbox",isRequired: true,choicesByUrl: {
url: "https://restcountries.eu/rest/v2/all"
},name: "countries",title:
"Please select all countries you have been for the last 3 years."
}
]
};
const survey = new Survey.Model(json);
return <Survey.Survey model={survey} />;
}
}
export default SurveyComponent;
因此,您将获得类中仅剩的 render
函数。
这是你的分叉 plunker - https://codesandbox.io/s/new-brook-wsmot?file=/src/SurveyComponent.jsx
更新 1
功能组件
import React,{ Component } from "react";
import $ from "jquery";
import select2Init from "select2";
import "select2/dist/css/select2.min.css";
import * as Survey from "survey-react";
import * as widgets from "surveyjs-widgets";
import "survey-react/modern.css";
import "./index.css";
Survey.StylesManager.applyTheme("modern");
window["$"] = window["jQuery"] = $;
select2Init();
widgets.select2(Survey);
widgets.select2tagbox(Survey);
function render() {
const json = {
elements: [
{
type: "tagbox",choicesByUrl: {
url: "https://restcountries.eu/rest/v2/all"
},title: "Please select all countries you have been for the last 3 years."
}
]
};
const survey = new Survey.Model(json);
return <Survey.Survey model={survey} />;
}
export default render;
这是更新后的代码沙箱 - https://codesandbox.io/s/crazy-elgamal-01nku?file=/src/SurveyComponent.jsx
当然 - 调查模型应该作为道具值传递
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。