实现antd下拉框动态添加内容（与数据库交互）

antd下拉控件的动态内容添加（与数据库交互）

antd这个框架给开发带来了极大的方便，但同时，我认为还有一些不方便的地方：常用的逻辑在文档中没有体现。需要前端开发经验的人才能快速上手，而我刚刚接触这个东西，antd基本将所有常用的控件全都封装了，包括select下拉框，在以往的开发当中，我常常将下拉框中的选项写死，没有与后端进行交互，可需求并不总是这样的，不能总是糊弄甲方，在粗浅的学习之余，写下这篇博客，用作往后实践的参考。

方法

1. 在以前的开发中常常是将下拉框中的内容写死，如下面代码所示
   
   const STATUS_OPTIONS = ['广告', '活动', '新闻', '投票'];
   
   然后用map方法进行遍历：

<Select
placeholder="请选择"
style={{ width: 300 }}
onChange={e => this.handleActivity(e)}>
{STATUS_OPTIONS.map(it => (
<Select.Option key={it} value={it}>
{it}
</Select.Option>
))}
</Select>


可以看到的是，这种方法无法对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中去

<FormItem
{...formItemLayout}
label={<span>选择活动</span>}
style={{ display: getFieldValue('type') === '活动' ? 'block' : 'none' }}
>
{getFieldDecorator('target')(
<Select placeholder="选择活动" style={{ width: 300 }}>
{list.map(it => (
<Select.Option key={it.id} value={it.id}>
{it.title}
</Select.Option>
))}
</Select>
)}
</FormItem>


4.该工程是荆门文体云项目，特此谨记