react實現(xiàn)動態(tài)選擇框
更新時間：2022年08月23日 16:28:07 作者：追逐驀然
這篇文章主要為大家詳細介紹了react實現(xiàn)動態(tài)選擇框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了react實現(xiàn)動態(tài)選擇框的具體代碼，供大家參考，具體內(nèi)容如下
小需求
在工作中，我們也會碰到這種需求: 為了提高用戶的體驗，在搜索的時候，采用靈活查詢。用戶可以自己選擇查詢項并且填寫對應的值。
這篇博文涉及知識點在這篇博文“react+antd 動態(tài)編輯表格數(shù)據(jù)”中提及過。大家可以先去這篇學習一下然后這里。
示例代碼
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() {
? ? // 可選項
? ? const [choseList, setChoseList] = useState(['商品ID', '款號', '產(chǎn)品線','一級類目','二級類目','三級類目','渠道'])
? ? // 已存在選
? ? const [exitChoseList, setExitChostList] = useState([])
? ? /**
? ? ?* ?searchData的數(shù)據(jù)結(jié)構(gòu)是:
? ? ?* ? ? ?{
? ? ?* ? ? ? ? ?// 選擇項
? ? ? ? ? ? ? ? 'sort': '',
? ? ? ? ? ? ? ? // 用戶選擇的值，即在多選框中選擇的值
? ? ? ? ? ? ? ? 'value': [],
? ? ? ? ? ? ? ? // 可選擇項
? ? ? ? ? ? ? ? 'chose_list': [],
? ? ? ? ? ? ? ? // 用戶選擇一個選擇項之后，這個選擇項對應的所有的選擇。例如: 選擇項為“季節(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) => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 判斷用戶選擇的選擇項是否已經(jīng)存在
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(exitChoseList.indexOf(value) == -1){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 用戶選擇的選擇項不存在的時候，判斷是否已經(jīng)有選擇項了
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(searchData[index]['sort']!= ''){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 要是存在選擇項的話
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...exitChoseList]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 先把之前的選擇項刪除掉
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj.splice(index, 1)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 添加新的選擇項
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 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{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 不存在選擇項的話
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...exitChoseList]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setExitChostList([])
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 添加選擇項
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 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('已存在這個選擇項了')
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? }}>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? item.chose_list.map(i => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return <Option value={i}>{i}</Option>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? </Select>
? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? searchData[index]['sort'] == '商品ID' || '款號' ? <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] 這個特性，造的第一個組件。后續(xù)還會繼續(xù)分享自己的造的組件。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
React實現(xiàn)錨點跳轉(zhuǎn)組件附帶吸頂效果的示例代碼
這篇文章主要為大家詳細介紹了React如何實現(xiàn)移動端錨點跳轉(zhuǎn)組件附帶吸頂效果，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起了解一下2023-01-01
這篇文章主要為大家介紹了react?hooks中的useState使用要點詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
react自適應布局px轉(zhuǎn)rem實現(xiàn)示例詳解
這篇文章主要為大家介紹了react自適應布局px轉(zhuǎn)rem實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
這篇文章主要給大家介紹了關(guān)于react中hook及使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
react的ui庫antd中form表單使用SelectTree反顯問題及解決
這篇文章主要介紹了react的ui庫antd中form表單使用SelectTree反顯問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
React Antd中如何設(shè)置表單只輸入數(shù)字
這篇文章主要介紹了React Antd中如何設(shè)置表單只輸入數(shù)字問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了如何在React中直接使用Redux,目前redux在react中使用是最多的，所以我們需要將之前編寫的redux代碼，融入到react當中去，本文給大家詳細講解，需要的朋友可以參考下2022-11-11
當一個APP在運行的時候, 開發(fā)者想要將自己的代碼更新到用戶的手機上時, 一般都有兩種方案, 一是熱更新, 二就是APP更新.熱更新暫且不說,這篇文章就講講 APP 如何更新。2021-06-06
這篇文章主要為大家介紹了插件化機制優(yōu)雅封裝你的hook請求使用方式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
React?浮層組件（也稱為彈出組件或彈窗組件）通常是指在用戶界面上浮動顯示的組件,本文主要介紹了浮層組件的實現(xiàn)方法,感興趣的小伙伴可以了解下2024-02-02