長期更新,記錄一下近期工作中涉及到的內容(DvaJs Ant Design)

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

<From.Item />
表單域
表單一定會包含表單域,表單域可以是輸入控件,
標準表單域,標籤,下拉菜單,文本域等。

這裏我們封裝了表單域 <Form.Item /> 。

<Form.Item {...props}>{children}</Form.Item>

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 屬性

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章