本文实例为大家分享了react实现动态选择框的具体代码,供大家参考,具体内容如下
小需求
在工作中,我们也会碰到这种需求: 为了提高用户的体验,在搜索的时候,采用灵活查询。用户可以自己选择查询项并且填写对应的值。
这篇博文涉及知识点在这篇博文“react+antd 动态编辑表格数据”中提及过。大家可以先去这篇学习一下然后这里。
示例代码
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中的: […searchData] 这个特性,造的第一个组件。后续还会继续分享自己的造的组件。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。