65 lines
2.1 KiB
JavaScript
65 lines
2.1 KiB
JavaScript
import React, { Component } from 'react';
|
|
import UploadLeftLayout from '../../components/upload-left-layout';
|
|
import BriefQuestions from '../../components/brief-questions';
|
|
import SingleQuestions from '../../components/single-questions';
|
|
import MultipleQuestions from '../../components/multiple-questions';
|
|
import JudgeQuestions from '../../components/judge-questions';
|
|
import { uploadLayout } from '../../constant';
|
|
import './index.less';
|
|
export default class SingleBox extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
layoutList: uploadLayout,
|
|
currentIndex: 0,
|
|
};
|
|
}
|
|
/**
|
|
* 切换题型
|
|
* @param {*} id
|
|
*/
|
|
onChangeQuestionsType = (layoutIndex) => {
|
|
let { layoutList, currentIndex } = this.state;
|
|
if (currentIndex === layoutIndex) {
|
|
return;
|
|
}
|
|
let list = layoutList.map((item, index) => {
|
|
let flag = false;
|
|
if (layoutIndex === index) {
|
|
flag = true;
|
|
}
|
|
return {
|
|
...item,
|
|
active: flag,
|
|
};
|
|
});
|
|
this.setState({
|
|
layoutList: list,
|
|
currentIndex: layoutIndex,
|
|
});
|
|
};
|
|
|
|
render() {
|
|
const { currentIndex, layoutList } = this.state;
|
|
return (
|
|
<div style={{ display: 'flex' }}>
|
|
<UploadLeftLayout layoutList={layoutList} onChange={this.onChangeQuestionsType} />
|
|
<div className="upload-questions-modular">{this.changeReander(currentIndex)}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
changeReander = (i) => {
|
|
switch (i) {
|
|
case 0:
|
|
return <BriefQuestions questionsType={i + 1} key={`question_${i}`} />;
|
|
case 1:
|
|
return <SingleQuestions questionsType={i + 1} key={`question_${i}`} />;
|
|
case 2:
|
|
return <MultipleQuestions questionsType={i + 1} key={`question_${i}`} />;
|
|
case 3:
|
|
return <JudgeQuestions questionsType={i + 1} key={`question_${i}`} />;
|
|
}
|
|
};
|
|
}
|