长期更新记录一下近期工作中涉及到的内容DvaJs-Ant-Design

43次阅读

共计 1434 个字符,预计需要花费 4 分钟才能阅读完成。

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

正文完
 0