使用SurveyJS React表单库快速入门指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01006/article/details/148524909

使用SurveyJS React表单库快速入门指南

survey-library surveyjs/survey-library 是一个基于 JavaScript 的调查问卷库，它提供了创建、编辑、呈现和收集调查问卷的功能。这个库的主要特点是易用性高，支持多种问题类型，包括单选、多选、文本输入、下拉列表、矩阵选择等。此外，它还支持多种主题和样式，并且可以自定义问卷外观和行为。SurveyJS 可以用于在线调查、客户满意度调查、市场调研等场景。项目地址: https://gitcode.com/gh_mirrors/su/survey-library

SurveyJS是一个强大的前端表单解决方案，它允许开发者通过JSON配置快速构建动态表单。本文将详细介绍如何在React项目中使用SurveyJS表单库。

一、SurveyJS核心概念

SurveyJS采用"配置即代码"的理念，通过JSON对象定义表单结构。这种方式具有以下优势：

声明式开发：通过JSON描述表单结构，而非命令式编码
动态渲染：运行时解析JSON配置并生成对应表单
跨平台：同一份配置可在不同前端框架中使用
易于维护：表单结构与业务逻辑分离

二、环境准备

1. 安装依赖

SurveyJS React版本包含两个核心包：

npm install survey-react-ui --save

这会自动安装survey-core作为依赖项，其中：

survey-core：提供核心功能，不依赖特定UI框架
survey-react-ui：提供React组件封装

2. 样式配置

SurveyJS提供多种预设主题：

import 'survey-core/defaultV2.css';

可选主题包括：

default (默认主题)
defaultV2 (新版默认主题)
modern (现代风格)
bootstrap (Bootstrap风格)

三、创建基础表单

1. 定义表单模型

表单模型通过JSON配置定义：

const surveyJson = {
  title: "用户信息登记",
  description: "请填写您的用户信息",
  elements: [
    {
      name: "firstName",
      title: "名",
      type: "text",
      isRequired: true
    },
    {
      name: "lastName",
      title: "姓", 
      type: "text",
      isRequired: true
    }
  ]
};

关键属性说明：

name：字段标识符，用于数据处理
title：显示给用户的标签
type：字段类型(text/checkbox/radiogroup等)
isRequired：是否必填

2. 实例化模型

将JSON配置转换为可用的表单模型：

import { Model } from 'survey-core';

function SurveyComponent() {
  const survey = new Model(surveyJson);
  return <Survey model={survey} />;
}

四、表单渲染与SSR处理

1. 基本渲染

使用Survey组件渲染表单：

import { Survey } from 'survey-react-ui';

function SurveyComponent() {
  return <Survey model={survey} />;
}

2. 服务端渲染(SSR)处理

由于SurveyJS依赖浏览器API，在Next.js等支持SSR的框架中需要特殊处理：

// components/SurveyComponent.js
'use client'
import { Survey } from 'survey-react-ui';

export default function SurveyComponent({ model }) {
  return <Survey model={model} />;
}

// pages/survey.js
import dynamic from 'next/dynamic';

const SurveyComponent = dynamic(
  () => import('../components/SurveyComponent'),
  { ssr: false }
);

五、表单提交处理

1. 基本提交处理

监听表单完成事件：

survey.onComplete.add((sender, options) => {
  console.log(JSON.stringify(sender.data, null, 3));
});

2. 实际应用中的数据处理

生产环境中通常需要将数据发送到服务器：

async function saveSurveyResults(url, json) {
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(json)
    });
    
    if (!response.ok) throw new Error('提交失败');
    return await response.json();
  } catch (error) {
    console.error('提交错误:', error);
    throw error;
  }
}

// 使用示例
survey.onComplete.add((survey) => {
  saveSurveyResults('/api/survey', survey.data)
    .then(() => alert('提交成功!'))
    .catch(() => alert('提交失败，请重试'));
});

六、进阶功能

1. 多页表单

const surveyJson = {
  pages: [
    {
      title: "个人信息",
      elements: [
        // 第一页元素
      ]
    },
    {
      title: "偏好设置",
      elements: [
        // 第二页元素
      ]
    }
  ]
};

2. 条件逻辑

elements: [
  {
    name: "hasCar",
    title: "您有车吗?",
    type: "boolean"
  },
  {
    name: "carModel",
    title: "您的车型号是?",
    type: "text",
    visibleIf: "{hasCar} = true"
  }
]

3. 表单验证

elements: [
  {
    name: "email",
    title: "电子邮箱",
    type: "text",
    validators: [
      {
        type: "email",
        text: "请输入有效的邮箱地址"
      }
    ]
  }
]