問(wèn)卷調(diào)查怎么寫？

前臺(tái)的邏輯部分也就是在——單選和多選的實(shí)現(xiàn)以及存儲(chǔ)上面

---

第一步：首先了解數(shù)據(jù)的基本類型、格式——大致如下（兩個(gè)單選題目，一個(gè)多選題目）：

state = {choose_data: [{title_num:'1',id: 1,key: '1',title: '【安全類】請(qǐng)選擇您心目中的“職業(yè)形象達(dá) 人”',title_type: 1,choose_list: [{id: 1,key: '1-1',letter: 'A',img: choose_pic,content: '安全部-特勤-張XX',},{id: 2,key: '1-2',letter: 'B',img: choose_pic,content: '安全部-特勤-趙XX',}]},{title_num:'2',id: 2,key: '2',title: '有安全意識(shí)的是',title_type: 1,choose_list: [{id: 1,key: '1-1',letter: 'A',content: '我是選擇一',},{id: 2,key: '1-2',letter: 'B',content: '我是選擇2',}]},{title_num:'3',id: 3,key: '3',title: '是顏色的有',title_type: 2,choose_list: [{id: 1,key: '1-1',letter: 'A',content: '我是選擇一',},{id: 2,key: '1-2',letter: 'B',content: '我是選擇2',},{id: 3,key: '1-3',letter: 'C',content: '我是選擇2',}]}],answer: [], //存儲(chǔ)選擇的答案（以數(shù)組包裹對(duì)象的方式來(lái)存儲(chǔ)）}

包括的內(nèi)容：題目id（題目標(biāo)題、單選還是多選、題號(hào)等），第二層是選項(xiàng)的內(nèi)容（每個(gè)選項(xiàng)的id、內(nèi)容等）

第二步 引入antd單選多選標(biāo)簽

import { Radio,Checkbox } from 'antd';

該情景下的單選多選框略有不同，所以需要利用選框組的形式來(lái)實(shí)現(xiàn)（為了確保每個(gè)題目的答案選擇不會(huì)跟其他題目沖突）：
所以還需要聲明選框組的標(biāo)簽

const RadioGroup = Radio.Group; const CheckboxGroup = Checkbox.Group;

第三步 頁(yè)面的呈現(xiàn)方式

<ul className={styles.topic_list_box}>{data.map((item) => {return (<li key={item.id}><p><span className={styles.title_num}>{`${item.title_num}.`}</span>{item.title}<span className={styles.topic_type}>{item.title_type===1?'單選題':'多選題'}</span></p><ul className={styles.choose_list}>{item.title_type===1?<RadioGroup name="radiogroup" onChange={this.change_radio.bind(this, item.id)}>{item.choose_list.length > 0 ?item.choose_list.map((item1) => {return (<li key={item1.id}>{item1.img ? <img src={item1.img} alt="choose_pic" /> : ''}<div className={styles.content}><span>{`${item1.letter}.`}</span><Radiovalue={item1.letter}>{item1.content}</Radio></div></li>)}) : ''}</RadioGroup>:<CheckboxGroup onChange={this.change_radio.bind(this, item.id,'checkbox')}>{item.choose_list.length > 0 ?item.choose_list.map((item1) => {return (<li key={item1.id}>{item1.img ? <img src={item1.img} alt="choose_pic" /> : ''}<div className={styles.content}><span>{`${item1.letter}.`}</span><Checkboxvalue={item1.letter}>{item1.content}</Checkbox></div></li>)}) : ''}</CheckboxGroup>}</ul></li>)})} </ul>

基本邏輯：如果是單選題的話，按照單選的格式來(lái)渲染，否則按照復(fù)選的格式來(lái)渲染（都是一組的格式），因?yàn)檫@樣才能保證每道題目都是獨(dú)立的
事件：onChange()
因?yàn)閱芜x和多選事件中的參數(shù)代表的是不同的意思，所以需要區(qū)分一下

//選擇change_radio(title_id, e,str) {const answer_current = this.state.answer; //原本state數(shù)組中存儲(chǔ)的數(shù)據(jù)const answer_new = { title: title_id, choose_id: e==='checkbox'?str:e.target.value} //最新原則的題目以及對(duì)應(yīng)的答案answer_current.map((item) => {if (item.title === title_id) { //如果原來(lái)的數(shù)組中題號(hào)存在和最新的一樣的，則要剔除answer_current.splice(answer_current.indexOf(item), 1)}})//把最新的答案拼接到原來(lái)的數(shù)組中this.setState({answer: this.state.answer.concat(answer_new)})}

事件邏輯：
state中answer代表的是現(xiàn)有的答案（即在事件中重新聲明之后的answer_current ），變量answer_new 代表的是用戶最新選擇的題目以及對(duì)應(yīng)的答案，也就是說(shuō)需要把新的答案存儲(chǔ)到answer中之外，還要判斷answer中是否有同樣的題目的答案，有的話則需要?jiǎng)h除掉。
至于==answer_new ==
choose_id要根據(jù)e來(lái)判定是因?yàn)?#xff0c;單選事件和多選事件中的參數(shù)不一樣，
如果是單選e代表的是事件對(duì)象，str是undefined，
如果是多選，e代表的是我們傳遞進(jìn)去的參數(shù)‘checkbox’，str則代表我選中的答案，所以是這樣一個(gè)格式

萬(wàn)般滋味，都是生活。公眾號(hào)求關(guān)注哦!

總結(jié)

以上是生活随笔為你收集整理的react 实现问卷调查（单选题目、多选题目）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。