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進行動態編輯.

1. 現在的方法中，我們可以在點選某個按鈕的時候，訪問到後端的介面，接收來自後端的指定資料，然後將資料裡的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.該工程是荊門文體雲專案，特此謹記