react的index中的ReactDOM.render文件
import React from 'react';
import ReactDOM from 'react-dom';
import Check from './check.jsx';
// import Browser from './browser.jsx';
ReactDOM.render(
<Check/>,
document.getElementById('root')
);
基本样式文件
import React, {Component, Fragment} from 'react'
import './check.less'
import type from './image/type.png'
import sole from './image/sole.png'
import double from './image/double.png'
import write from './image/write.png'
import click from './image/click.png'
import set from './image/set.png'
import del from './image/del.png'
import add from './image/add.png'
import reduce from './image/reduce.png'
import radio from './image/radio.png'
import two from './image/two.png'
class Check extends React.Component {
constructor(props) {
super(props);
this.state = {
title: '问卷标题',
endValue: '您已完成本次问卷，感谢您的帮助与支持',
list: [],
id: 0,
};
}
twoInput = () => {
let {list, id} = this.state
let ownInput = {
optionlist: [
{option: '', id: id}, {option: '', id: id + 1}
]
}
ownInput.id = id + 1;
ownInput.title = ""
ownInput.chooseType = 3;
this.setState({
list: [...list, ownInput],
id: id + 1,
})
}
//点击单选增加单选的选项
ownInput = () => {
let {list, id} = this.state
let ownInput = {
optionlist: [
{option: '', id: id}, {option: '', id: id + 1}
]
}
ownInput.id = id + 1;
ownInput.title = ""
ownInput.chooseType = 2;
this.setState({
list: [...list, ownInput],
id: id + 1,
})
}
addOption = (index) => {
const {list, id} = this.state
const option = [{option: '', id: id + 1}]
list[index].optionlist = [...list[index].optionlist, ...option]
this.setState({
list,
id: id + 1
})
}
//点击填空增加填空的选项
addInput = () => {
let {list, id} = this.state
let inputObj = {};
inputObj.id = id + 1;
inputObj.title = "";
inputObj.chooseType = 1;
this.setState({
list: [...list, inputObj],
id: id + 1
})
}
setOptionValue = (e, index, optionIndex) => {
const {list} = this.state
list[index].optionlist[optionIndex].option = e.target.value
this.setState({
list
})
}
setInput = (e, index) => {
const {list} = this.state
if (index >= 0) {
list[index].title = e.target.value;
this.setState({
list
})
}
}
//动态减少option里面的内容
delOption = (index, optionIndex) => {
const {list} = this.state
if (list[index].optionlist.length == 2) {
alert("最少保留两个选项")
return
}
list[index].optionlist.splice(optionIndex, 1)
this.setState({
list
})
}
del = (index) => {
const {list} = this.state
list.splice(index, 1)
this.setState({
list
})
}
render() {
const {title, endValue, list} = this.state
return (
<Fragment>
{console.log(list)}
<div className="start">
<div className="head">
<div className="title head-item">{title || '问卷标题'}</div>
<div className="cat head-item">
<button className="preview">预览</button>
<button className="issue">发布</button>
</div>
</div>
</div>
<div className="main">
<div className="main-type">
<div className="type">
<div className="type-title">题目类型</div>
<div className="type-image"><img src={type} alt="类型"/></div>
</div>
<div className="choose" onClick={this.ownInput}>
<div className="choose-icon">
<img src={sole} alt="单选题"/>
</div>
<div className="choose-type">单选题</div>
</div>
<div className="choose" onClick={this.twoInput}>
<div className="choose-icon">
<img src={double} alt="多选题"/>
</div>
<div className="choose-type">多选题</div>
</div>
<div className="choose" onClick={this.addInput}>
<div className="choose-icon">
<img src={write} alt="填空题"/>
</div>
<div className="choose-type">填空题</div>
</div>
</div>
<div className="main-content">
<div className="check-title">
<div className="check-input-title">
<input className="title-input" value={title} onChange={(e) => this.inputChange(e)}
placeholder="问卷标题"/>
</div>
</div>
{/*暂时隐藏*/}
{list.length == 0 && <div className="tip">
<div className="tip-icon">
<img src={click}/>
</div>
<div>点击题目类型进行问卷设计吧</div>
</div>}
{/*-----------------单选类型--------------*/}
{
list.map((item, index) => {
if (item.chooseType == 2) {
return <div className="person fill" key={item.id}>
<div className="fill-top">
<div className="fill-index">{index + 1}</div>
<div className="fill-right">
<div className="fill-box"><input className="fill-input" type="text"
value={item.title}
onChange={(e) => this.setInput(e, index)}
placeholder="请选择一个选项（单选）"/></div>
</div>
<div className="fill-icon">
<div className="fill-item" onClick={() => this.addOption(index)}><img
src={add} alt="题目增加选项"/></div>
<div className="fill-item fill-set"><img src={set} alt="题目设置"/></div>
<div className="fill-item" onClick={(e) => this.del(index)}><img
src={del} alt="删除题目"/></div>
</div>
</div>
{/*循环option选项*/}
{item.optionlist.map((itemNode, optionIndex) => {
return <div className="fill-top" key={itemNode.id}>
<div className="fill-right">
<div className="fill-box fill-option">
<div><img className="radio" src={radio} alt=""/></div>
<input className="fill-input options-input" type="text"
onChange={(e) => this.setOptionValue(e, index, optionIndex)}
placeholder="选项"/></div>
</div>
<div className="fill-icon">
<div className="fill-item fill-set"><img src={set} alt="题目设置"/>
</div>
<div className="fill-item"
onClick={(e) => this.delOption(index, optionIndex)}><img
src={reduce} alt="删除题目"/></div>
</div>
</div>
}
)}
</div>
} else if (item.chooseType == 1) {
return <div key={item.id}>
<div className="fill">
<div className="fill-top">
<div className="fill-index">{index + 1}</div>
<div className="fill-right">
<div className="fill-box"><input className="fill-input" type="text"
value={item.title}
onChange={(e) => this.setInput(e, index)}
placeholder="请输入本项问卷内容"/></div>
</div>
<div className="fill-icon">
<div className="fill-item fill-set"><img src={set} alt="题目设置"/>
</div>
<div className="fill-item" onClick={(e) => this.del(index)}><img
src={del} alt="删除题目"/></div>
</div>
</div>
<div className="fill-bottom">
<div className="fill-bottom-box"></div>
</div>
</div>
</div>
} else {
return <div className="person fill" key={item.id}>
<div className="fill-top">
<div className="fill-index">{index + 1}</div>
<div className="fill-right">
<div className="fill-box"><input className="fill-input" type="text"
value={item.title}
onChange={(e) => this.setInput(e, index)}
placeholder="请选择一个选项（多选）"/></div>
</div>
<div className="fill-icon">
<div className="fill-item" onClick={() => this.addOption(index)}>
<img
src={add} alt="题目增加选项"/></div>
<div className="fill-item fill-set"><img src={set} alt="题目设置"/>
</div>
<div className="fill-item" onClick={(e) => this.del(index)}><img
src={del} alt="删除题目"/></div>
</div>
</div>
{/*循环option选项*/}
{item.optionlist.map((itemNode, optionIndex) => {
return <div className="fill-top" key={itemNode.id}>
<div className="fill-right">
<div className="fill-box fill-option">
<div><img className="radio" src={two} alt=""/></div>
<input className="fill-input options-input" type="text"
onChange={(e) => this.setOptionValue(e, index, optionIndex)}
placeholder="选项"/></div>
</div>
<div className="fill-icon">
<div className="fill-item fill-set"><img src={set} alt="题目设置"/>
</div>
<div className="fill-item"
onClick={(e) => this.delOption(index, optionIndex)}><img
src={reduce} alt="删除题目"/></div>
</div>
</div>
}
)}
</div>
}
}
)
}
{/*-----------------多选--------------*/}
<div className="finish">
<div className="finish-title">
<input className="finish-title-input" placeholder="点击编辑结束语" value={endValue}
onChange={(e) => this.endChange(e)}/>
</div>
<div className="submit issue">发布</div>
</div>
</div>
</div>
</Fragment>
)
}
inputChange(e) {
this.setState({
title: e.target.value
})
}
endChange(e) {
this.setState({
endValue: e.target.value
})
}
}
export default Check
css文件
html, body, #root {
height: 100%;
background: #ededed;
margin: 0;
padding: 0;
}
.start {
width: 100%;
background: #fff;
height: 4rem;
position: fixed;
border-radius: 5px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
}
.start > .head {
display: flex;
flex-direction: row;
}
.start > .head > .head-item {
width: 50%;
}
.title {
line-height: 4rem;
padding-left: 4rem;
}
.cat {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
line-height: 4rem;
padding-right: 10rem;
}
.preview {
width: 4rem;
height: 1.8rem;
color: #2672ff;
border: 1px solid #2672ff;
background: #fff;
border-radius: 3px;
margin-right: 2rem;
cursor: pointer;
}
.issue {
cursor: pointer;
width: 4rem;
height: 1.8rem;
color: #fff;
border: 1px solid #2672ff;
background: #2672ff;
border-radius: 3px;
margin-right: 3rem;
}
.main {
display: flex;
flex-direction: row;
width: 100%;
padding-top: 4rem;
background: #ededed;
}
.main-type {
position: fixed;
width: 15rem;
height: 100%;
}
.main-content {
padding-left: 20rem;
width: calc(100% - 15rem);
}
.type {
/*background: red;*/
display: flex;
flex-direction: row;
text-align: center;
line-height: 3rem;
align-items: center;
}
.type-title {
margin-left: 4rem;
}
.type-image {
width: 2rem;
height: 2rem;
padding-left: 1rem;
}
.type-image img {
width: 100%;
height: 100%;
}
.choose {
width: 4rem;
height: 4rem;
border-radius: 2px;
border: 1px solid #d8d8d8;
margin-top: 1rem;
margin-left: 4rem;
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
width: 7rem;
height: 3rem;
}
.choose > .choose-icon {
width: 1rem;
height: 1rem;
margin-right: 0.5rem;
}
.choose > .choose-icon > img {
font-size: 0;
width: 100%;
height: 100%;
}
.choose:hover {
cursor: pointer;
border: 2px solid #2672ff;
}
.check-title {
border-radius: 4px;
background-color: #fff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
margin-top: 4rem;
height: 6rem;
width: 80%;
}
.check-input-title {
text-align: center;
line-height: 3rem;
border-radius: 4px;
width: 80%;
height: 3rem;
margin: 0 auto;
}
.title-input {
padding-left: 2rem;
margin-top: 1.2rem;
border-radius: 4px;
width: 100%;
height: 100%;
font-size: 1.4rem;
outline: none;
border: none;
}
.title-input:hover {
background: #ededed;
border: 1px dotted #ededed;
}
.tip {
width: 80%;
border: 2px dotted #2672ff;
border-radius: 5px;
height: 20rem;
margin-top: 1rem;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.tip-icon {
width: 1.8rem;
height: 1.8rem;
}
.tip-icon img {
width: 100%;
height: 100%;
}
.finish {
width: 80%;
border-radius: 5px;
margin-top: 1rem;
background: #fff;
height: 10rem;
}
.finish-title {
width: 80%;
height: 3rem;
margin: 2rem auto;
}
.finish-title-input:hover {
background: #ededed;
border: 1px dotted #ededed;
}
.finish-title-input {
margin-top: 3rem;
width: 100%;
height: 100%;
border-radius: 4px;
font-size: 1.2rem;
outline: none;
border: none;
text-align: center;
}
.submit {
margin: 4rem auto;
text-align: center;
line-height: 1.8rem;
}
.fill{
width: 80%;
/*height: 8rem;*/
background: #fff;
margin-top: 2rem;
border-radius: 5px;
padding-bottom: 0.7rem;
}
.fill-top{
display: flex;
flex-direction: row;
width: 100%;
height: 3.4rem;
}
.fill-index{
width: 4rem;
height: 100%;
text-align: center;
line-height: 4rem;
}
.fill-right{
display: flex;
flex-direction: row;
width: calc(100% - 12rem);
}
.fill-box{
width: calc(100% - 4rem);
}
.fill-option{
width: calc(100% - 15rem);
margin-left: 5rem;
display: flex;flex-direction: row;
}
.fill-box .fill-input{
width: 100%;
line-height: 3.3rem;
margin-top: 1rem;
height: 2rem;
outline: none;
border: none;
padding: 0 1rem;
border-radius: 5px;
background: #ededed;
}
.fill-bottom{
width: 60%;
border: 1px solid #d8d8d8;
height: 2rem;
margin-top: 0.5rem;
margin-left: 4rem;
}
.fill-icon{
margin-top: 1rem;
display: flex;
flex-direction: row;
margin-left: -1rem;
cursor: pointer;
}
.fill-item{
margin-left: 0.3rem;
}
.fill-set{
margin-top: 0.1rem;
}
.fill-icon >img{
width:0.2rem;
height: 0.2rem;
}
.radio{
margin-top: 1.2rem;
}
.fill-options{
margin-left: 4rem;
width: 100%;
background: red;
}
.option{
width: 100%;
height: 100%;
background: #000c17;
}
.radio{
margin-right: 0.5rem;
margin-top: 1.3rem;
}
.fill-option{
width: 75%;
}
.options-input{
width: 80%;
background: red;
}
/*------- 单选--------*/
然后我们就实现我们的效果了
6437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
