實現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.該工程是荊門文體雲項目，特此謹記