react如何實現動態選擇框

本篇內容介紹了“react如何實現動態選擇框”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

小需求

在工作中，我們也會碰到這種需求: 為了提高用戶的體驗，在搜索的時候，采用靈活查詢。用戶可以自己選擇查詢項并且填寫對應的值。

示例代碼

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', '款號', '產品線','一級類目','二級類目','三級類目','渠道'])

    // 已存在選
    const [exitChoseList, setExitChostList] = useState([])

    /**
     *  searchData的數據結構是:
     *      {
     *          // 選擇項
                'sort': '',
                // 用戶選擇的值，即在多選框中選擇的值
                'value': [],
                // 可選擇項
                'chose_list': [],
                // 用戶選擇一個選擇項之后，這個選擇項對應的所有的選擇。例如: 選擇項為“季節”則春夏秋冬
                '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) => {
                                // 判斷用戶選擇的選擇項是否已經存在
                                if(exitChoseList.indexOf(value) == -1){
                                    // 用戶選擇的選擇項不存在的時候，判斷是否已經有選擇項了
                                    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

“react如何實現動態選擇框”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！