考试系统：试卷编辑器这节我们来写下试卷编辑器。
和问卷星的类似：
可以选择不同的题型，然后设置题目的内容，答案、分值、答案解析等。
我们先来设计下 json 的数据结构：
这只是一个列表的 json，比较简单。
大概是这样的结构：
[
{
"type": "radio",
"question": "最长的河？",
"options": [
"选项1",
"选项2"
],
"score": 5,
"answer": "选项1",
"answerAnalyse": "答案解析"
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
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>
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
我们按照低代码编辑器这种布局来写，比如 amis (opens new window) 编辑器：
左边是物料区、中间是画布区、右边是属性编辑区。
写下布局：
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>
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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;
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
就是 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>
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
我们写死了一个 json：
然后写了一个 renderComponents 方法来渲染它：
css 如下：
.component-item {
margin: 20px;
line-height: 40px;
font-size: 20px;
border-bottom: 1px solid #000;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
渲染出来是这样的：
然后我们拖拽左边的物料到画布的时候，在 json 数组加一个元素。
我们用 react-dnd 实现拖拽，安装用到的包：
npm install react-dnd react-dnd-html5-backend
1
在最外层加一下 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>;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
用 useDrag 给它加上拖拽。
item 是传递的数据
用一下：
<MaterialItem name="单选题" type="单选题"/>
<MaterialItem name="多选题" type="多选题"/>
<MaterialItem name="填空题" type="填空题"/>
1
2
3
2
3
这样，就可以拖拽了：
然后处理 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()
}),
}));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
在右边展示下 json：
<pre>
{
JSON.stringify(json, null, 4)
}
</pre>
1
2
3
4
5
2
3
4
5
然后点击问题的时候加一个高亮框：
const [curQuestionId, setCurQuestionId] = useState<number>();
1
<div className="component-item" key={item.id} onClick={() => {
setCurQuestionId(item.id)
}} style={ item.id === curQuestionId ? { border : '2px solid blue' } : {}}>
1
2
3
2
3
然后选中的时候在右边展示对应的编辑表单：
首先把 json 拿进来作为一个 state：
const [json, setJson] = useState<Array<Question>>([])
1
setJson((json) => [
...json,
{
id: new Date().getTime(),
type,
question: "最高的山？",
options: [
"选项1",
"选项2"
],
score: 5,
answer: "选项1",
answerAnalyse: "答案解析"
}
])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
然后写下选中时的表单：
{
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>
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
就是根据 curQuesitonId 从 json 中找到对应的数据，用 Form 来回显
当 onValuesChange 的时候，设置回 json
切换选中的问题的时候，有的表单值没变。
因为我们设置的是 initialValues，它只影响初始值。
const [form] = useForm();
useEffect(() => {
form.setFieldsValue(json.filter(item => item.id === curQuestionId)[0])
}, [curQuestionId]);
1
2
3
4
5
2
3
4
5
做下同步就好了。
试一下：
没啥问题。
然后再试下编辑：
可以看到，选中的问题，会回显在表单，编辑后会同步修改对应 json。
我们再加一个 antd 的 Segmented 组件来做 Tab
const [key, setKey] = useState<string>('json');
1
<Segmented value={key} onChange={setKey} block options={['json', '属性']} />
1
有了 tab 之后好看多了。
这样，试卷编辑功能就完成了。
案例代码在小册仓库：
# 总结
这节我们实现了试卷编辑器的功能。
左边是物料区，中间是画布区，右边是属性编辑区。
中间画布区就是渲染 json。
用 react-dnd 实现了拖拽，拖拽物料到中间的画布区，会在 json 中增加一条。
然后点击问题的时候会高亮，并且在右边展示编辑的表单。
编辑的时候会同步修改 json，中间画布区也会重新渲染。
当然，现在的 json 还没有保存，下节我们把它保存到数据库。