長期更新，記錄一下近期工作中涉及到的內容（DvaJs Ant Design）

MadPecker 發布于2019-08-26 13:54 / 2909人閱讀

摘要：表單域表單一定會包含表單域，表單域可以是輸入控件，標準表單域，標簽，下拉菜單，文本域等。如果發現下拉菜單跟隨頁面滾動，或者需要在其他彈層中觸發，請嘗試使用將下拉彈層渲染節點固定在觸發器的父元素中。

DvaJs

dispatch
在 dva 中，connect Model 的組件通過 props 可以訪問到 dispatch，
可以調用 Model 中的 Reducer 或者 Effects，常見的形式如：

dispatch({
type: "user/add", // 如果在 model 外調用，需要添加 namespace
payload: {}, // 需要傳遞的信息
});

可以通過類似this.props.dispatch({
type: "siteConfig/eff_getMutantGene", // siteConfig為modal文件夾名，eff_getMutantGene為Effects方法。
payload: {itemId: item[i].itemid}
})
調用Model中的Reducer或者Effects。

connect
如果要發起一個 action 需要使用 dispatch 函數；
需要注意的是 dispatch 是在組件 connect Models以后，
通過 props 傳入的。

Ant Design

表單域
表單一定會包含表單域，表單域可以是輸入控件，
標準表單域，標簽，下拉菜單，文本域等。

這里我們封裝了表單域。

{children}

getPopupContainer
getPopupContainer菜單渲染父節點。默認渲染到 body 上，
如果你遇到菜單滾動定位問題，試試修改為滾動的區域，并相對其定位。

如果發現下拉菜單跟隨頁面滾動，
或者需要在其他彈層中觸發 Select，
請嘗試使用 getPopupContainer={triggerNode => triggerNode.parentNode}*
將下拉彈層渲染節點固定在觸發器的父元素中。

getFieldDecorator.1
經過 getFieldDecorator 包裝的控件，表單控件會自動添加 value（或
valuePropName 指定的其他屬性） onChange（或 trigger 指定的其他屬性），
數據同步將被 Form 接管，這會導致以下結果：

你不再需要也不應該用 onChange 來做同步，但還是可以繼續監聽 onChange 等事件。

你不能用控件的 value defaultValue 等屬性來設置表單域的值，

默認值可以用 getFieldDecorator 里的 initialValue。

你不應該用 setState，可以使用 this.props.form.setFieldsValue 來動態改變表單值。

getFieldDecorator.2
const { getFieldDecorator, getFieldValue } = this.props.form
需要用到getFieldDecorator 等方法時需要用到this.prop.form。還需要在末尾加上Form.create
經過 Form.create 包裝的組件將會自帶 this.props.form 屬性，

注意：使用 getFieldsValue getFieldValue setFieldsValue 等時，

應確保對應的 field 已經用 getFieldDecorator 注冊過了。

resetFields
resetFields重置一組輸入控件的值（為 initialValue）與狀態，
如不傳入參數，則重置所有組件

Form.create()
經 Form.create() 包裝過的組件會自帶 this.props.form 屬性

帶有勾選框的Table
Table的rowSelection的type屬性可以改變可選表單的單選或多選問題。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109773.html

平時積累的前端資源，持續更新中。。。

本文收集學習過程中使用到的資源。持續更新中…… 項目地址 https://github.com/abc-club/f... 目錄 vue react react-native Weex typescript Taro nodejs 常用庫 css js es6 移動端微信公眾號小程序 webpack GraphQL 性能與監控高質文章趨勢動效數據結構與算法 js core 代碼規范...

acrazing 2019-08-26 10:40 評論0 收藏0
Ant Desing Pro2.0(一)項目初始化

摘要：寫在前面最近做畢設的時候發現網絡上關于版本的基礎入門資料太少，我一個后端開發人員當時入門也是跌跌撞撞，現在我將我所學的分享出來，避免大家少走一些彎路。 1.寫在前面最近做畢設的時候發現網絡上關于ant designpro2.0版本的基礎入門資料太少，我一個后端開發人員當時入門也是跌跌撞撞，現在我將我所學的分享出來，避免大家少走一些彎路。 2.開發環境你的本地環境需要安裝 node ...

BigNerdCoding 2019-08-23 15:41 評論0 收藏0
react + node + express + ant + mongodb 的簡潔兼時尚的博客網站

摘要：前言此項目是用于構建博客網站的，由三部分組成，包含前臺展示管理后臺和后端。體驗地址網站主頁網站首頁管理后臺計劃這次是一個完整的全棧式開發，只要部署了這三個項目的代碼，是完全可以搭建好博客網站的。 showImg(https://segmentfault.com/img/remote/1460000017095592); 前言此項目是用于構建博客網站的，由三部分組成，包含前臺展示、管理...

fish 2019-06-26 17:54 評論0 收藏0
Ant Desing Pro2.0(二)新增頁面

摘要：配置路由在行新增如下內容這行是新增的內容做完如上步驟其實功能是完成了，但是版本中加入了菜單國際化中。所以你剛剛的頁面如下這不是我們想要的效果，讓我在進行修改修改在行新增如下內容新增菜單新增頁面查看效果運行效果讓我做一道連線題把 1.參考資料參考ant design pro 參考DvaJs 2.目錄地址 Ant Desing Pro2.0(一)項目初始化 Ant Desing...

vboy1010 2019-08-23 15:41 評論0 收藏0
Ant Desing Pro2.0(三)設置代理

摘要：參考資料參考參考目錄地址一項目初始化二新增頁面三設置代理四與服務端交互修改文件在將行和行的注釋打開代理前綴，請求格式資源地址將所有以開頭的所有路由都代理到目標地址代理目標地址是否跨域訪問最終請求時候忽略掉舉個例子吧有個接口請求之后會返回 1.參考資料參考ant design pro 參考DvaJs 2.目錄地址 Ant Desing Pro2.0(一)項目初始化 Ant D...

Lycheeee 2019-08-23 15:42 評論0 收藏0