实现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.该工程是荆门文体云项目，特此谨记