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 (         
                              {                     searchData.map((item, index) => {                         return                               {                                 // 判断用户选择的选择项是否已经存在                                 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 {i}                                     })                                 }                                                          {                                 searchData[index]['sort'] == '商品ID' || '款号' ?  {                                     let obj = [...searchData]                                     obj[index]['value'] = e.target.value                                     setSearchData(obj)                                 }} />                                     :  {                                         let obj = [...searchData]                                         obj[index]['value'] = value                                         setSearchData(obj)                                     }}>                                         {                                             item.value_chose_list.map(i => {                                                 return {i}                                             })                                         }                                                                  }                             {                                 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)                                 }                             }} />                                              })                 }                  {                     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);                 }} />                          
                 {                     console.log(searchData)                 }}>搜索                 {                     setSearchData([])                     setExitChostList([])                 }}>重置             
         
     ) } export default Index