antd下拉控件的动态内容添加(与数据库交互)
antd这个框架给开发带来了极大的方便,但同时,我认为还有一些不方便的地方:常用的逻辑在文档中没有体现。需要前端开发经验的人才能快速上手,而我刚刚接触这个东西,antd基本将所有常用的控件全都封装了,包括select下拉框,在以往的开发当中,我常常将下拉框中的选项写死,没有与后端进行交互,可需求并不总是这样的,不能总是糊弄甲方,在粗浅的学习之余,写下这篇博客,用作往后实践的参考。
方法
在以前的开发中常常是将下拉框中的内容写死,如下面代码所示
const STATUS_OPTIONS = ['广告', '活动', '新闻', '投票'];
然后用map方法进行遍历:
placeholder="请选择"
style={{ width: 300 }}
onChange={e => this.handleActivity(e)}>
{STATUS_OPTIONS.map(it => (
{it}
))}
可以看到的是,这种方法无法对STATUS_OPTION进行动态编辑.
2. 现在的方法中,我们可以在点击某个按钮的时候,访问到后端的接口,接收来自后端的指定数据,然后将数据里的list映射到下拉框的option里(使用上面的方法)。根据需求,我会在选择某个下拉框中的选项时,事件触发,调用后端的接口
handleActivity = e => {
if (e === '活动') {
const { dispatch } = this.props;
dispatch({
type: 'systemSetting/activityList',
payload: {
size: 10,
},
});
}
};
3.完成上述操作后,后端返回给前端的数据中会有一个list,将这个list使用map方法映射到option中去
{...formItemLayout}
label={选择活动}
style={{ display: getFieldValue('type') === '活动' ? 'block' : 'none' }}
>
{getFieldDecorator('target')(
{list.map(it => (
{it.title}
))}
)}
4.该工程是荆门文体云项目,特此谨记