react实现动态选择框

本文实例为大家分享了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] 这个特性，造的第一个组件。后续还会继续分享自己的造的组件。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于react实现动态选择框的详细内容...