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

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