問卷調查怎么寫？

前臺的邏輯部分也就是在——單選和多選的實現以及存儲上面

---

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

state = {choose_data: [{title_num:'1',id: 1,key: '1',title: '【安全類】請選擇您心目中的“職業形象達 人”',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: '有安全意識的是',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: [], //存儲選擇的答案（以數組包裹對象的方式來存儲）}

包括的內容：題目id（題目標題、單選還是多選、題號等），第二層是選項的內容（每個選項的id、內容等）

第二步 引入antd單選多選標簽

import { Radio,Checkbox } from 'antd';

該情景下的單選多選框略有不同，所以需要利用選框組的形式來實現（為了確保每個題目的答案選擇不會跟其他題目沖突）：
所以還需要聲明選框組的標簽

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

第三步 頁面的呈現方式

<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>

基本邏輯：如果是單選題的話，按照單選的格式來渲染，否則按照復選的格式來渲染（都是一組的格式），因為這樣才能保證每道題目都是獨立的
事件：onChange()
因為單選和多選事件中的參數代表的是不同的意思，所以需要區分一下

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

事件邏輯：
state中answer代表的是現有的答案（即在事件中重新聲明之后的answer_current ），變量answer_new 代表的是用戶最新選擇的題目以及對應的答案，也就是說需要把新的答案存儲到answer中之外，還要判斷answer中是否有同樣的題目的答案，有的話則需要刪除掉。
至于==answer_new ==
choose_id要根據e來判定是因為，單選事件和多選事件中的參數不一樣，
如果是單選e代表的是事件對象，str是undefined，
如果是多選，e代表的是我們傳遞進去的參數‘checkbox’，str則代表我選中的答案，所以是這樣一個格式

萬般滋味，都是生活。公眾號求關注哦!

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。