资讯专栏INFORMATION COLUMN

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

MadPecker / 2906人阅读

摘要:表单域表单一定会包含表单域,表单域可以是输入控件,标准表单域,标签,下拉菜单,文本域等。如果发现下拉菜单跟随页面滚动,或者需要在其他弹层中触发,请尝试使用将下拉弹层渲染节点固定在触发器的父元素中。

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属性可以改变可选表单的单选或多选问题。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/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 评论0 收藏0
  • Ant Desing Pro2.0(一)项目初始化

    摘要:写在前面最近做毕设的时候发现网络上关于版本的基础入门资料太少,我一个后端开发人员当时入门也是跌跌撞撞,现在我将我所学的分享出来,避免大家少走一些弯路。 1.写在前面 最近做毕设的时候发现网络上关于ant designpro2.0版本的基础入门资料太少,我一个后端开发人员当时入门也是跌跌撞撞,现在我将我所学的分享出来,避免大家少走一些弯路。 2.开发环境 你的本地环境需要安装 node ...

    BigNerdCoding 评论0 收藏0
  • react + node + express + ant + mongodb 的简洁兼时尚的博客网站

    摘要:前言此项目是用于构建博客网站的,由三部分组成,包含前台展示管理后台和后端。体验地址网站主页网站首页管理后台计划这次是一个完整的全栈式开发,只要部署了这三个项目的代码,是完全可以搭建好博客网站的。 showImg(https://segmentfault.com/img/remote/1460000017095592); 前言 此项目是用于构建博客网站的,由三部分组成,包含前台展示、管理...

    fish 评论0 收藏0
  • Ant Desing Pro2.0(二)新增页面

    摘要:配置路由在行新增如下内容这行是新增的内容做完如上步骤其实功能是完成了,但是版本中加入了菜单国际化中。所以你刚刚的页面如下这不是我们想要的效果,让我在进行修改修改在行新增如下内容新增菜单新增页面查看效果运行效果让我做一道连线题把 1.参考资料 参考ant design pro 参考DvaJs 2.目录地址 Ant Desing Pro2.0(一)项目初始化 Ant Desing...

    vboy1010 评论0 收藏0
  • Ant Desing Pro2.0(三)设置代理

    摘要:参考资料参考参考目录地址一项目初始化二新增页面三设置代理四与服务端交互修改文件在将行和行的注释打开代理前缀,请求格式资源地址将所有以开头的所有路由都代理到目标地址代理目标地址是否跨域访问最终请求时候忽略掉举个例子吧有个接口请求之后会返回 1.参考资料 参考ant design pro 参考DvaJs 2.目录地址 Ant Desing Pro2.0(一)项目初始化 Ant D...

    Lycheeee 评论0 收藏0

发表评论

0条评论

MadPecker

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<