【毕业设计】基于react的问卷调查表_pgj.zip

# react-questionnair 基于react开发的自定义问卷调查表。目前只支持单选题、下拉题、多选题、单行文本题、多行文本题、填空题六种基本题型。支持拖拽排序功能。 ## 预览  ## 安装 npm install react-questionnair ## Demo 开发 ```shell $ git clone .git $ cd react-questionnair $ npm install $ npm run dev ``` [demo地址](https://pandly.github.io/react-questionnair/dist/) ## 使用 ```shell import React from 'react' import Questionnnair from 'react-questionnair' <Questionnnair /> //编辑题目 <Questionnair.Editor /> //渲染题目 <Questionnair.Answer /> //渲染答案 ``` ## APIs | 属性 | 描述 | 类型 | 默认值 | | --------- | :------------------------------ | :------: | :----: | | editor | 编辑器数据结构 | array | | | acitveAnswer | 编辑器组件为true时可以进行答案填写 | boolean | false | | 事件 | 描述 | 参数 | | --------- | :------------------------------ | :------: | | onDrag | 当拖拽题目时会触发该事件（包括题目栏拖拽） | array | | onConfirm | 当确认编辑题目时会触发该事件 | array | | onCopy | 当拷贝题目时会触发该事件 | array | | onRemove | 当移除题目时会触发该事件 | array | | onSign | 当标记问卷时会触发该事件 | array | | onSaveTitle | 当问卷题目失焦时会触发该事件 | array | ## 数据结构 ``` //可供选择的type类型 const type = { radio: '单选题', dropdown: '下拉题', checkbox: '多选题', text: '单行文本题', textarea: '多行文本题', input: '填空题' } //react-questionnair按照如下的数据结构约定一个编辑器，开发时可以按照如下的数据结构约定好 const editor = { questionId: uuid(), //id type: type, //类型，根据类型渲染出相应的题型 title: '', //题目 required: false, //是否必填 remark: false, //是否有备注 remarkText: '', //备注内容 options: ['选项', '选项'], //选项(只有radio,checkbox,select有,其余尽量给个空数组) rows: 1, //选项占的行数 textareaHeight: 3, //多行文本高度 maxLength: 50, //单行文本限制的字数 otherOption: false, //是否有其他选项 otherOptionForwards: '其他', //”其他“项文本(前) otherOptionBackwards: '', //”其他“项文本(后) completionForwards: '题目：', //填空题文本(前) completionBackwards: '', //填空题文本(后) isEditor: true, //编辑状态还是已编辑状态 isFirst: true, //是否是新创建的 editorShake: '' } ``` ## 注意事项 * 题目编辑器都是循环`<Questionnair.Editor editor={editor} />`渲染出来的，react-questionnair的设计思路就是将编辑器数组状态提升， 每次进行编辑器修改时(触发API事件)，都会反映在编辑器数组中，然后再重新渲染整个问卷表。与后端交互的话把最新的题目数组返回给后端保存就行。 * 其他模块需要编辑好的题目话，根据相应的id去后端取相应的题目`<Questionnair.Editor editor={editor} activeAnswer = {true}/>`渲染在页面上。 * 填写完题目以后再根据`<Questionnair.Answer editor={editor} />`组件渲染答案。 免责声明： 1.本资源仅供学习和交流使用，不保证其准确性、完整性、及时性或适用性。 2.本资源仅包含一般信息，不构成专业建议。在使用本资源时，请务必自行研究并谨慎决策。 3.我已尽力确保本资源的正确性和合法性，但不对其准确性、完整性和及时性做出保证。 4.本资源不应用于商业用途。 5.在使用本资源的过程中，用户应自行承担所有风险和责任，并遵守相关法律法规。 6.对于因使用本资源而产生的任何损失或损害，我概不负责。 请确保在使用本资源时仔细阅读并遵守以上免责声明。如果您有任何疑问或需要进一步帮助，请联系我。 资源最后修改时间：2025-02-13 19:49:13 99623589917344 c4bb8a26-5113-47ea-a9ff-96ebad39c705 免责声明： 1.本资源仅供学习和交流使用，不保证其准确性、完整性、及时性或适用性。 2.本资源仅包含一般信息，不构成专业建议。在使用本资源时，请务必自行研究并谨慎决策。 3.我已尽力确保本资源的正确性和合法性，但不对其准确性、完整性和及时性做出保证。 4.本资源不应用于商业用途。 5.在使用本资源的过程中，用户应自行承担所有风险和责任，并遵守相关法律法规。 6.对于因使用本资源而产生的任何损失或损害，我概不负责。 请确保在使用本资源时仔细阅读并遵守以上免责声明。如果您有任何疑问或需要进一步帮助，请联系我。 资源最后修改时间：2025-02-13 21:00:08 103878701485233 f9d7cbfd-712f-452d-a4b8-3bb014f94984