實現antd下拉框動態新增內容(與資料庫互動)

2022-08-02 12:51:11 字數 810 閱讀 5341

antd這個框架給開發帶來了極大的方便,但同時,我認為還有一些不方便的地方:常用的邏輯在文件中沒有體現。需要前端開發經驗的人才能快速上手,而我剛剛接觸這個東西,antd基本將所有常用的控制項全都封裝了,包括select下拉框,在以往的開發當中,我常常將下拉框中的選項寫死,沒有與後端進行互動,可需求並不總是這樣的,不能總是糊弄甲方,在粗淺的學習之餘,寫下這篇部落格,用作往後實踐的參考。

在以前的開發中常常是將下拉框中的內容寫死,如下面**所示

const status_options = ['廣告', '活動', '新聞', '投票'];

然後用map方法進行遍歷:

this.handleactivity(e)}>

))}

可以看到的是,這種方法無法對status_option進行動態編輯.

2. 現在的方法中,我們可以在點選某個按鈕的時候,訪問到後端的介面,接收來自後端的指定資料,然後將資料裡的list對映到下拉框的option裡(使用上面的方法)。根據需求,我會在選擇某個下拉框中的選項時,事件觸發,呼叫後端的介面

handleactivity = e =>  = this.props;

dispatch(,

});}

};

3.完成上述操作後,後端返回給前端的資料中會有乙個list,將這個list使用map方法對映到option中去

選擇活動}

style=}

>

))})}

4.該工程是荊門文體雲專案,特此謹記

antd 裡面下拉框聯動

需求 兩個下拉框,第乙個下拉框切換後,第二個下拉框根據第乙個的值改變下拉選項 使用shouldupdate,另外當第乙個值改變時,onselectchange事件中,使用form.setfieldsvalue將被關聯的值清空 或者其他操作 const onselectchange e,type 分割...

python下拉框二級聯動 antd下拉框聯動說明

先說一下效果要求,上面乙個下拉框,下面乙個,要求上面選中的時候,下面的內容要跟著變。因為想到react是資料驅動的,就不打算再用jq的那種隱藏顯示了,而是通過在執行型別下拉框的onchange事件中,去改變下面的下拉框的資料,渲染出不同的下拉選擇。定義資料 modeoptions是各個下拉框的值,由...

bootstrap select下拉框動態資料

select class selectpicker multiple selectpicker和multiple屬性的搭配使用可實現多選 data live search true 這個屬性的預設值是false,作用是開啟模糊篩查搜尋框。data max options 這個屬性表示最多可選幾個,搭...