这节我们来写下试卷编辑器。
和问卷星的类似：
可以选择不同的题型，然后设置题目的内容，答案、分值、答案解析等。
我们先来设计下 json 的数据结构：
这只是一个列表的 json，比较简单。
大概是这样的结构：
[
{
"type": "radio",
"question": "最长的河？",
"options": ["选项1", "选项2"],
"score": 5,
"answer": "选项1",
"answerAnalyse": "答案解析"
}
]
type 是题型
options 是单选的选项
score 是题目分数
answer 是答案
answerAnalyse 是答案解析
我们加一个 /edit/:id 的路由：
写下内容：
pages/Edit/index.tsx
import { useParams } from "react-router-dom";
export function Edit() {
let { id } = useParams();
return <div>Edit: {id}</div>;
}
我们按照低代码编辑器这种布局来写，比如 amis 编辑器：
左边是物料区、中间是画布区、右边是属性编辑区。
写下布局：
import { useParams } from "react-router-dom";
import "./index.scss";
import { Button } from "antd";
export function Edit() {
let { id } = useParams();
return (
<div id="edit-container">
<div className="header">
<div>试卷编辑器</div>
<Button type="primary">预览</Button>
</div>
<div className="body">
<div className="materials">
<div className="meterial-item">单选题</div>
<div className="meterial-item">多选题</div>
<div className="meterial-item">填空题</div>
</div>
<div className="edit-area"></div>
<div className="setting"></div>
</div>
</div>
);
}
index.scss
* {
margin: 0;
padding: 0;
}
#edit-container {
.header {
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
font-size: 30px;
line-height: 80px;
border-bottom: 1px solid #000;
padding: 0 20px;
}
.body {
height: calc(100vh - 80px);
display: flex;
.materials {
height: 100%;
width: 300px;
border-right: 1px solid #000;
.meterial-item {
padding: 20px;
border: 1px solid #000;
display: inline-block;
margin: 10px;
cursor: move;
}
}
.edit-area {
height: 100%;
flex: 1;
}
.setting {
height: 100%;
width: 400px;
border-left: 1px solid #000;
}
}
}
就是 flex、width、height、padding 这些布局。
看下效果：
中间部分通过就是递归渲染 json 为组件：
import { useParams } from "react-router-dom";
import "./index.scss";
import { Button, Radio, Checkbox, Input } from "antd";
export type Question = {
id: number;
question: string;
type: "radio" | "checkbox" | "input";
options?: string[];
score: number;
answer: string;
answerAnalyse: string;
};
const json: Array<Question> = [
{
id: 1,
type: "radio",
question: "最长的河？",
options: ["选项1", "选项2"],
score: 5,
answer: "选项1",
answerAnalyse: "答案解析",
},
{
id: 2,
type: "checkbox",
question: "最高的山？",
options: ["选项1", "选项2"],
score: 5,
answer: "选项1",
answerAnalyse: "答案解析",
},
{
id: 2,
type: "input",
question: "测试问题",
score: 5,
answer: "选项1",
answerAnalyse: "答案解析",
},
];
export function Edit() {
let { id } = useParams();
function renderComponents(arr: Array<Question>) {
return arr.map((item) => {
let formComponent;
if (item.type === "radio") {
formComponent = (
<Radio.Group>
{item.options?.map((option) => (
<Radio value={option}>{option}</Radio>
))}
</Radio.Group>
);
} else if (item.type === "checkbox") {
formComponent = <Checkbox.Group options={item.options} />;
} else if (item.type === "input") {
formComponent = <Input />;
}
return (
<div className="component-item" key={item.id}>
<p className="question">{item.question}</p>
<div className="options">{formComponent}</div>
<p className="score">分值：{item.score}</p>
<p className="answer">答案：{item.answer}</p>
<p className="answerAnalyse">
答案解析：{item.answerAnalyse}
</p>
</div>
);
});
}
return (
<div id="edit-container">
<div className="header">
<div>试卷编辑器</div>
<Button type="primary">预览</Button>
</div>
<div className="body">
<div className="materials">
<div className="meterial-item">单选题</div>
<div className="meterial-item">多选题</div>
<div className="meterial-item">填空题</div>
</div>
<div className="edit-area">{renderComponents(json)}</div>
<div className="setting"></div>
</div>
</div>
);
}
我们写死了一个 json：
然后写了一个 renderComponents 方法来渲染它：
css 如下：
.component-item {
margin: 20px;
line-height: 40px;
font-size: 20px;
border-bottom: 1px solid #000;
}
渲染出来是这样的：
然后我们拖拽左边的物料到画布的时候，在 json 数组加一个元素。
我们用 react-dnd 实现拖拽，安装用到的包：
npm install react-dnd react-dnd-html5-backend
在最外层加一下 DndProvider，这是 react-dnd 用来跨组件通信的：
在物料上加上 useDrag：
封装一个 pages/Edit/Material.tsx 组件
import { useDrag } from "react-dnd";
export function MaterialItem(props: { name: string; type: string }) {
const [_, drag] = useDrag({
type: props.type,
item: {
type: props.type,
},
});
return (
<div className="meterial-item" ref={drag}>
{props.name}
</div>
);
}
用 useDrag 给它加上拖拽。
item 是传递的数据
用一下：
<MaterialItem name="单选题" type="单选题"/>
<MaterialItem name="多选题" type="多选题"/>
<MaterialItem name="填空题" type="填空题"/>
这样，就可以拖拽了：
然后处理 drop：
accept 是可以接收的 drag 的类型，也就是这个：
drop 的时候显示个消息提示。
over 的时候加个蓝色边框
测试下：
没啥问题。
然后我们 drop 的时候把它加到 json 里就好了。
把写死的 json 清空，然后 drop 的时候往里 push 元素
const [{ isOver }, drop] = useDrop(() => ({
accept: ["单选题", "多选题", "填空题"],
drop: (item: { type: string }) => {
const type = {
单选题: "radio",
多选题: "checkbox",
填空题: "input",
}[item.type] as Question["type"];
json.push({
id: new Date().getTime(),
type,
question: "最高的山？",
options: ["选项1", "选项2"],
score: 5,
answer: "选项1",
answerAnalyse: "答案解析",
});
},
collect: (monitor) => ({
isOver: monitor.isOver(),
}),
}));
在右边展示下 json：
<pre>{JSON.stringify(json, null, 4)}</pre>
然后点击问题的时候加一个高亮框：
const [curQuestionId, setCurQuestionId] = useState<number>();
<div className="component-item" key={item.id} onClick={() => {
setCurQuestionId(item.id)
}} style={ item.id === curQuestionId ? { border : '2px solid blue' } : {}}>
然后选中的时候在右边展示对应的编辑表单：
首先把 json 拿进来作为一个 state：
const [json, setJson] = useState < Array < Question >> [];
setJson((json) => [
...json,
{
id: new Date().getTime(),
type,
question: "最高的山？",
options: ["选项1", "选项2"],
score: 5,
answer: "选项1",
answerAnalyse: "答案解析",
},
]);
然后写下选中时的表单：
{
curQuestionId &&
json
.filter((item) => item.id === curQuestionId)
.map((item, index) => {
return (
<div key={index}>
<Form
style={{ padding: "20px" }}
initialValues={item}
onValuesChange={(changed, values) => {
setJson((json) => {
return json.map((cur) => {
return cur.id === item.id
? {
id: item.id,
...values,
options:
typeof values.options ===
"string"
? values.options?.split(
","
)
: values.options,
}
: cur;
});
});
}}>
<Form.Item
label="问题"
name="question"
rules={[
{ required: true, message: "请输入问题!" },
]}>
<Input />
</Form.Item>
<Form.Item
label="类型"
name="type"
rules={[
{ required: true, message: "请选择类型!" },
]}>
<Radio.Group>
<Radio value="radio">单选题</Radio>
<Radio value="checkbox">多选题</Radio>
<Radio value="input">填空题</Radio>
</Radio.Group>
</Form.Item>
{item.type !== "input" && (
<Form.Item
label="选项（逗号分割）"
name="options"
rules={[
{
required: true,
message: "请输入选项!",
},
]}>
<Input />
</Form.Item>
)}
<Form.Item
label="分数"
name="score"
rules={[
{ required: true, message: "请输入分数!" },
]}>
<InputNumber />
</Form.Item>
<Form.Item
label="答案"
name="answer"
rules={[
{ required: true, message: "请输入答案!" },
]}>
<Input />
</Form.Item>
<Form.Item
label="答案分析"
name="answerAnalyse"
rules={[
{
required: true,
message: "请输入答案分析!",
},
]}>
<TextArea />
</Form.Item>
</Form>
</div>
);
});
}
就是根据 curQuesitonId 从 json 中找到对应的数据，用 Form 来回显
当 onValuesChange 的时候，设置回 json
切换选中的问题的时候，有的表单值没变。
因为我们设置的是 initialValues，它只影响初始值。
const [form] = useForm();
useEffect(() => {
form.setFieldsValue(json.filter((item) => item.id === curQuestionId)[0]);
}, [curQuestionId]);
做下同步就好了。
试一下：
没啥问题。
然后再试下编辑： 
可以看到，选中的问题，会回显在表单，编辑后会同步修改对应 json。
我们再加一个 antd 的 Segmented 组件来做 Tab
const [key, setKey] = useState < string > "json";
<Segmented value={key} onChange={setKey} block options={["json", "属性"]} />
有了 tab 之后好看多了。
这样，试卷编辑功能就完成了。
案例代码在小册仓库：
总结
这节我们实现了试卷编辑器的功能。
左边是物料区，中间是画布区，右边是属性编辑区。
中间画布区就是渲染 json。
用 react-dnd 实现了拖拽，拖拽物料到中间的画布区，会在 json 中增加一条。
然后点击问题的时候会高亮，并且在右边展示编辑的表单。
编辑的时候会同步修改 json，中间画布区也会重新渲染。
当然，现在的 json 还没有保存，下节我们把它保存到数据库。