react-基于react的问卷调查表

# react-questionnair 基于react开发的自定义问卷调查表。目前只支持单选题、下拉题、多选题、单行文本题、多行文本题、填空题六种基本题型。支持拖拽排序功能。 ## 预览  ## 安装 npm install react-questionnair ## Demo 开发 ```shell $ git clone https://github.com/pandly/react-questionnair.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} />`组件渲染答案。