react实现动态选择框
更新时间：2022年08月23日 16:28:07 作者：追逐蓦然
这篇文章主要为大家详细介绍了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如何实现移动端锚点跳转组件附带吸顶效果，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起了解一下2023-01-01
这篇文章主要为大家介绍了react hooks中的useState使用要点详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
这篇文章主要为大家介绍了react自适应布局px转rem实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要给大家介绍了关于react中hook及使用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
react的ui库antd中form表单使用SelectTree反显问题及解决
这篇文章主要介绍了react的ui库antd中form表单使用SelectTree反显问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了React Antd中如何设置表单只输入数字问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了如何在React中直接使用Redux,目前redux在react中使用是最多的，所以我们需要将之前编写的redux代码，融入到react当中去，本文给大家详细讲解，需要的朋友可以参考下2022-11-11
当一个APP在运行的时候, 开发者想要将自己的代码更新到用户的手机上时, 一般都有两种方案, 一是热更新, 二就是APP更新.热更新暂且不说,这篇文章就讲讲 APP 如何更新。2021-06-06
这篇文章主要为大家介绍了插件化机制优雅封装你的hook请求使用方式示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
React 浮层组件（也称为弹出组件或弹窗组件）通常是指在用户界面上浮动显示的组件,本文主要介绍了浮层组件的实现方法,感兴趣的小伙伴可以了解下2024-02-02
最新评论