H5W3
当前位置:H5W3 > 其他技术问题 > 正文

react antd框架的Select组件疑问

场景:我需要完成一个筛选的功能、请看下图:

UI框架:antd;组件 Select

问题:代码重复量比较多、多个筛选需要写多个Select组件 请问有没有更好的方案?
下图是我的部分代码截图;详细的代码在底部

import React from 'react'
import { Select } from 'antd';
import styles from './search.moudule.scss'
const { Option } = Select;
console.log(styles)
class Search extends React.Component {
constructor (props) {
super(props)
this.state = {
search:{
citys:"",
years:"",
grades:"",
subjects:"",
semesters:"",
states:"",
},
citys:[ // 城市list
{
key:1,
value:"北京"
},
{
key:2,
value:"上海"
}
],
years:[ // 年份list
{
key:1,
value:"2020"
},
{
key:2,
value:"2021"
}
],
grades:[ // 年级list
{
key:1,
value:"早教"
},
{
key:2,
value:"托班"
}
],
subjects:[ // 学科list
{
key:1,
value:"数学"
},
{
key:2,
value:"英语"
}
],
semesters:[ // 学期list
{
key:1,
value:"春季"
},
{
key:2,
value:"秋季"
}
],
states:[ // 状态list
{
key:1,
value:"未发布"
},
{
key:2,
value:"已开启"
}
]
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(value, name) {
switch(name){
case 'citys':
console.log('城市:',value)
break;
case 'years':
console.log('年份:',value)
break;
case 'grades':
console.log('年级:',value)
break;
case 'subjects':
console.log('学期:',value)
break;
case 'semesters':
console.log('学科:',value)
break;
case 'states':
console.log('状态:',value)
break;
}
}
render() {
return (
<div>
<Select
placeholder='不限城市'
style={{ width: 200 }}
name='aaa'
labelInValue
onChange={(e) => this.handleChange(e,'citys')}
showSearch
optionFilterProp="children"
>
{
this.state.citys.map(item => {
return (
<Option value={item.key} key={item.key}>{item.value}</Option>
)
})
}
</Select>
<Select
placeholder='不限年份'
style={{ width: 200 }}
labelInValue
onChange={(e) => this.handleChange(e,'years')}
showSearch
optionFilterProp="children"
>
{
this.state.years.map(item => {
return (
<Option value={item.key} key={item.key}>{item.value}</Option>
)
})
}
</Select>
<Select
placeholder='不限年级'
style={{ width: 200 }}
labelInValue
onChange={(e) => this.handleChange(e,'grades')}
showSearch
optionFilterProp="children"
>
{
this.state.grades.map(item => {
return (
<Option value={item.key} key={item.key}>{item.value}</Option>
)
})
}
</Select>
<Select
placeholder='不限学科'
style={{ width: 200 }}
labelInValue
onChange={(e) => this.handleChange(e,'subjects')}
showSearch
optionFilterProp="children"
>
{
this.state.subjects.map(item => {
return (
<Option value={item.key} key={item.key}>{item.value}</Option>
)
})
}
</Select>
<Select
placeholder='不限学期'
style={{ width: 200 }}
labelInValue
onChange={(e) => this.handleChange(e,'semesters')}
showSearch
optionFilterProp="children"
>
{
this.state.semesters.map(item => {
return (
<Option value={item.key} key={item.key}>{item.value}</Option>
)
})
}
</Select>
<Select
placeholder='不限状态'
style={{ width: 200 }}
labelInValue
onChange={(e) => this.handleChange(e,'states')}
showSearch
optionFilterProp="children"
>
{
this.state.states.map(item => {
return (
<Option value={item.key} key={item.key}>{item.value}</Option>
)
})
}
</Select>
</div>
)
}
}
export default Search

回答

[{id: 'select1', props: {}, ...}, {id: 'select2', props: {}, ...}]

然后通过遍历渲染

m -> v

就如楼上兄台说的,还是要把所有数据整合到一起,在包一层模板进行遍历;再套select组件

未经允许不得转载:H5W3 » react antd框架的Select组件疑问

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址