react實(shí)現(xiàn)動(dòng)態(tài)選擇框
本文實(shí)例為大家分享了react實(shí)現(xiàn)動(dòng)態(tài)選擇框的具體代碼,供大家參考,具體內(nèi)容如下
小需求
在工作中,我們也會(huì)碰到這種需求: 為了提高用戶的體驗(yàn),在搜索的時(shí)候,采用靈活查詢。用戶可以自己選擇查詢項(xiàng)并且填寫對(duì)應(yīng)的值。
這篇博文涉及知識(shí)點(diǎn)在這篇博文“react+antd 動(dòng)態(tài)編輯表格數(shù)據(jù)”中提及過(guò)。大家可以先去這篇學(xué)習(xí)一下然后這里。
示例代碼
import React, { Component, useState } from 'react'; import { Button, Col, message, Select, Row, Input } from 'antd' import { PlusCircleOutlined, MinusCircleOutlined } from '@ant-design/icons'; const { Option } = Select function Index() { ? ? // 可選項(xiàng) ? ? const [choseList, setChoseList] = useState(['商品ID', '款號(hào)', '產(chǎn)品線','一級(jí)類目','二級(jí)類目','三級(jí)類目','渠道']) ? ? // 已存在選 ? ? const [exitChoseList, setExitChostList] = useState([]) ? ? /** ? ? ?* ?searchData的數(shù)據(jù)結(jié)構(gòu)是: ? ? ?* ? ? ?{ ? ? ?* ? ? ? ? ?// 選擇項(xiàng) ? ? ? ? ? ? ? ? 'sort': '', ? ? ? ? ? ? ? ? // 用戶選擇的值,即在多選框中選擇的值 ? ? ? ? ? ? ? ? 'value': [], ? ? ? ? ? ? ? ? // 可選擇項(xiàng) ? ? ? ? ? ? ? ? 'chose_list': [], ? ? ? ? ? ? ? ? // 用戶選擇一個(gè)選擇項(xiàng)之后,這個(gè)選擇項(xiàng)對(duì)應(yīng)的所有的選擇。例如: 選擇項(xiàng)為“季節(jié)”則春夏秋冬 ? ? ? ? ? ? ? ? 'value_chose_list':[] ? ? ? ? ? ? } ? ? ?*/ ? ? const [searchData, setSearchData] = useState([]) ? ? return ( ? ? ? ? <div> ? ? ? ? ? ? <Row style={{ marginLeft: 50, marginTop: 50, width:'100vw', }}> ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? searchData.map((item, index) => { ? ? ? ? ? ? ? ? ? ? ? ? return <Col span={8} style={{ display: 'flex', marginTop:5 }}> ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Select style={{ width: 150 }} value={searchData[index]['sort']} onChange={(value) => { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 判斷用戶選擇的選擇項(xiàng)是否已經(jīng)存在 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(exitChoseList.indexOf(value) == -1){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 用戶選擇的選擇項(xiàng)不存在的時(shí)候,判斷是否已經(jīng)有選擇項(xiàng)了 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(searchData[index]['sort']!= ''){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 要是存在選擇項(xiàng)的話 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...exitChoseList] ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 先把之前的選擇項(xiàng)刪除掉 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj.splice(index, 1) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 添加新的選擇項(xiàng) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj.push(value) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setExitChostList(obj) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let searchDataObj = [...searchData] ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setSearchData([]) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 然后將其他的值都配置初始化 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? searchDataObj[index]['value'] = [] ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? searchDataObj[index]['sort'] = value ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? searchDataObj[index]['value_chose_list'] = [1,2,3] ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setSearchData(searchDataObj) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }else{ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 不存在選擇項(xiàng)的話 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...exitChoseList] ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setExitChostList([]) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 添加選擇項(xiàng) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj.push(value) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setExitChostList(obj) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let searchDataObj = [...searchData] ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setSearchData([]) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? searchDataObj[index]['sort'] = value ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? searchDataObj[index]['value_chose_list'] = [1,2,3] ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setSearchData(searchDataObj) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }else{ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? message.warn('已存在這個(gè)選擇項(xiàng)了') ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }}> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? item.chose_list.map(i => { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return <Option value={i}>{i}</Option> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? ? </Select> ? ? ? ? ? ? ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? searchData[index]['sort'] == '商品ID' || '款號(hào)' ? <Input style={{ width: 200 }} value={searchData[index]['value']} onChange={(e) => { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...searchData] ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj[index]['value'] = e.target.value ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setSearchData(obj) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }} /> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? : <Select value={searchData[index]['value']} style={{ width: 200 }} mode="multiple" onChange={(value) => { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...searchData] ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj[index]['value'] = value ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setSearchData(obj) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }}> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? item.value_chose_list.map(i => { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return <Option value={i}>{i}</Option> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </Select> ? ? ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? ? <MinusCircleOutlined style={{marginTop:5, marginLeft:10, marginRight:10}} onClick={()=>{ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(searchData[index]['sort'] != ''){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let value = searchData[index]['sort'] ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let exitChoseObj = [...exitChoseList] ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setExitChostList([]) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? exitChoseObj.pop(value) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setExitChostList(exitChoseObj) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...searchData] ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj.splice(index, 1); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setSearchData(obj) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? ? }} /> ? ? ? ? ? ? ? ? ? ? ? ? </Col> ? ? ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? <PlusCircleOutlined style={{ marginLeft: 20, marginTop:10 }} onClick={() => { ? ? ? ? ? ? ? ? ? ? let obj = [...searchData] ? ? ? ? ? ? ? ? ? ? setSearchData([]) ? ? ? ? ? ? ? ? ? ? let arr3 = choseList.filter(items => exitChoseList.indexOf(items) == -1); ? ? ? ? ? ? ? ? ? ? obj.push({ ? ? ? ? ? ? ? ? ? ? ? ? 'sort': '', ? ? ? ? ? ? ? ? ? ? ? ? 'value': [], ? ? ? ? ? ? ? ? ? ? ? ? 'chose_list': arr3, ? ? ? ? ? ? ? ? ? ? ? ? 'value_chose_list':[] ? ? ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? ? ? ? setSearchData(obj); ? ? ? ? ? ? ? ? }} /> ? ? ? ? ? ? </Row> ? ? ? ? ? ? <div style={{marginTop:20, marginLeft:50, display:'flex'}}> ? ? ? ? ? ? ? ? <Button type="primary" onClick={()=>{ ? ? ? ? ? ? ? ? ? ? console.log(searchData) ? ? ? ? ? ? ? ? }}>搜索</Button> ? ? ? ? ? ? ? ? <Button type="primary" danger onClick={()=>{ ? ? ? ? ? ? ? ? ? ? setSearchData([]) ? ? ? ? ? ? ? ? ? ? setExitChostList([]) ? ? ? ? ? ? ? ? }}>重置</Button> ? ? ? ? ? ? </div> ? ? ? ? </div> ? ? ) } export default Index
總結(jié)
這里就是采用了react中的: […searchData] 這個(gè)特性,造的第一個(gè)組件。后續(xù)還會(huì)繼續(xù)分享自己的造的組件。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
React實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)組件附帶吸頂效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了React如何實(shí)現(xiàn)移動(dòng)端錨點(diǎn)跳轉(zhuǎn)組件附帶吸頂效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解一下2023-01-01react?hooks中的useState使用要點(diǎn)
這篇文章主要為大家介紹了react?hooks中的useState使用要點(diǎn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09react自適應(yīng)布局px轉(zhuǎn)rem實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了react自適應(yīng)布局px轉(zhuǎn)rem實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08react的ui庫(kù)antd中form表單使用SelectTree反顯問(wèn)題及解決
這篇文章主要介紹了react的ui庫(kù)antd中form表單使用SelectTree反顯問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01React Antd中如何設(shè)置表單只輸入數(shù)字
這篇文章主要介紹了React Antd中如何設(shè)置表單只輸入數(shù)字問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06插件化機(jī)制優(yōu)雅封裝你的hook請(qǐng)求使用方式
這篇文章主要為大家介紹了插件化機(jī)制優(yōu)雅封裝你的hook請(qǐng)求使用方式示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07React實(shí)現(xiàn)浮層組件的思路與方法詳解
React?浮層組件(也稱為彈出組件或彈窗組件)通常是指在用戶界面上浮動(dòng)顯示的組件,本文主要介紹了浮層組件的實(shí)現(xiàn)方法,感興趣的小伙伴可以了解下2024-02-02