react-questionnair

基于react开发的自定义问卷调查表。目前只支持单选题、下拉题、多选题、单行文本题、多行文本题、填空题六种基本题型。支持拖拽排序功能。

预览

安装

npm install react-questionnair

Demo 开发

$ git clone https://github.com/pandly/react-questionnair.git
$ cd react-questionnair
$ npm install
$ npm run dev

demo地址

使用

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} />组件渲染答案。