Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
10edd74f
A
ant-design
项目概览
wanjj_1210
/
ant-design
与 Fork 源项目一致
从无法访问的项目Fork
通知
10
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
ant-design
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
10edd74f
编写于
4月 12, 2016
作者:
B
Benjy Cui
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs: update demos of Form
上级
5bb8e31a
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
104 addition
and
45 deletion
+104
-45
components/form/demo/form-in-modal.md
components/form/demo/form-in-modal.md
+64
-0
components/form/demo/validate-customized.md
components/form/demo/validate-customized.md
+40
-45
未找到文件。
components/form/demo/form-in-modal.md
0 → 100644
浏览文件 @
10edd74f
# 与 Modal 配合使用
-
order: 14
在 Modal 中使用 Form,当点击 Modal 的确定时,调用
`this.props.form.getFieldsValue`
获取表单内的值。
---
````
jsx
import
{
Button
,
Form
,
Input
,
Modal
}
from
'
antd
'
;
const
createForm
=
Form
.
create
;
const
FormItem
=
Form
.
Item
;
let
Demo
=
React
.
createClass
({
getInitialState
()
{
return
{
visible
:
false
};
},
handleSubmit
()
{
console
.
log
(
this
.
props
.
form
.
getFieldsValue
());
this
.
hideModal
();
},
showModal
()
{
this
.
setState
({
visible
:
true
});
},
hideModal
()
{
this
.
setState
({
visible
:
false
});
},
render
()
{
const
{
getFieldProps
}
=
this
.
props
.
form
;
const
formItemLayout
=
{
labelCol
:
{
span
:
4
},
wrapperCol
:
{
span
:
20
},
};
return
(
<
div
>
<
Button
type
=
"primary"
onClick
=
{
this
.
showModal
}
>
点击有惊喜
</
Button
>
<
Modal
title
=
"登录"
visible
=
{
this
.
state
.
visible
}
onOk
=
{
this
.
handleSubmit
}
onCancel
=
{
this
.
hideModal
}
>
<
Form
horizontal
form
=
{
this
.
props
.
form
}
>
<
FormItem
{
...
formItemLayout
}
label
=
"用户名:"
>
<
Input
{
...
getFieldProps
(
'
username
'
,
{})
}
type
=
"text"
autoComplete
=
"off"
/>
</
FormItem
>
<
FormItem
{
...
formItemLayout
}
label
=
"密码:"
>
<
Input
{
...
getFieldProps
(
'
password
'
,
{})
}
type
=
"password"
autoComplete
=
"off"
/>
</
FormItem
>
</
Form
>
</
Modal
>
</
div
>
);
}
});
Demo
=
createForm
()(
Demo
);
ReactDOM
.
render
(<
Demo
/>,
mountNode
);
````
components/form/demo/validate-customized.md
浏览文件 @
10edd74f
...
...
@@ -9,7 +9,7 @@
---
````
jsx
import
{
Button
,
Form
,
Input
,
Row
,
Col
,
Modal
}
from
'
antd
'
;
import
{
Button
,
Form
,
Input
,
Row
,
Col
}
from
'
antd
'
;
import
classNames
from
'
classnames
'
;
const
createForm
=
Form
.
create
;
const
FormItem
=
Form
.
Item
;
...
...
@@ -25,7 +25,6 @@ let Demo = React.createClass({
rePassBarShow
:
false
,
passStrength
:
'
L
'
,
// 密码强度
rePassStrength
:
'
L
'
,
visible
:
false
,
};
},
...
...
@@ -37,7 +36,6 @@ let Demo = React.createClass({
}
console
.
log
(
'
Submit!!!
'
);
console
.
log
(
values
);
this
.
setState
({
visible
:
false
});
});
},
...
...
@@ -66,14 +64,6 @@ let Demo = React.createClass({
}
},
showModal
()
{
this
.
setState
({
visible
:
true
});
},
hideModal
()
{
this
.
setState
({
visible
:
false
});
},
checkPass
(
rule
,
value
,
callback
)
{
const
form
=
this
.
props
.
form
;
this
.
getPassStrenth
(
value
,
'
pass
'
);
...
...
@@ -127,7 +117,6 @@ let Demo = React.createClass({
render
()
{
const
{
getFieldProps
}
=
this
.
props
.
form
;
// 如果觉得在 JSX 中写 `getFieldProps` 会影响阅读,可以先用变量保存 `getFieldProps` 的返回值。
const
passProps
=
getFieldProps
(
'
pass
'
,
{
rules
:
[
{
required
:
true
,
whitespace
:
true
,
message
:
'
请填写密码
'
},
...
...
@@ -149,40 +138,46 @@ let Demo = React.createClass({
};
return
(
<
div
>
<
Button
type
=
"primary"
onClick
=
{
this
.
showModal
}
>
修改密码
</
Button
>
<
Modal
title
=
"修改密码"
visible
=
{
this
.
state
.
visible
}
onOk
=
{
this
.
handleSubmit
}
onCancel
=
{
this
.
hideModal
}
>
<
Form
horizontal
form
=
{
this
.
props
.
form
}
>
<
Row
>
<
Col
span
=
"18"
>
<
FormItem
{
...
formItemLayout
}
label
=
"密码:"
>
<
Input
{
...
passProps
}
type
=
"password"
onContextMenu
=
{
noop
}
onPaste
=
{
noop
}
onCopy
=
{
noop
}
onCut
=
{
noop
}
autoComplete
=
"off"
id
=
"pass"
/>
</
FormItem
>
</
Col
>
<
Col
span
=
"6"
>
{
this
.
state
.
passBarShow
?
this
.
renderPassStrengthBar
(
'
pass
'
)
:
null
}
</
Col
>
</
Row
>
<
Row
>
<
Col
span
=
"18"
>
<
FormItem
{
...
formItemLayout
}
label
=
"确认密码:"
>
<
Input
{
...
rePassProps
}
type
=
"password"
onContextMenu
=
{
noop
}
onPaste
=
{
noop
}
onCopy
=
{
noop
}
onCut
=
{
noop
}
autoComplete
=
"off"
id
=
"rePass"
/>
</
FormItem
>
</
Col
>
<
Col
span
=
"6"
>
{
this
.
state
.
rePassBarShow
?
this
.
renderPassStrengthBar
(
'
rePass
'
)
:
null
}
<
Form
horizontal
form
=
{
this
.
props
.
form
}
>
<
Row
>
<
Col
span
=
"18"
>
<
FormItem
{
...
formItemLayout
}
label
=
"密码:"
>
<
Input
{
...
passProps
}
type
=
"password"
onContextMenu
=
{
noop
}
onPaste
=
{
noop
}
onCopy
=
{
noop
}
onCut
=
{
noop
}
autoComplete
=
"off"
id
=
"pass"
/>
</
FormItem
>
</
Col
>
<
Col
span
=
"6"
>
{
this
.
state
.
passBarShow
?
this
.
renderPassStrengthBar
(
'
pass
'
)
:
null
}
</
Col
>
</
Row
>
<
Row
>
<
Col
span
=
"18"
>
<
FormItem
{
...
formItemLayout
}
label
=
"确认密码:"
>
<
Input
{
...
rePassProps
}
type
=
"password"
onContextMenu
=
{
noop
}
onPaste
=
{
noop
}
onCopy
=
{
noop
}
onCut
=
{
noop
}
autoComplete
=
"off"
id
=
"rePass"
/>
</
FormItem
>
</
Col
>
<
Col
span
=
"6"
>
{
this
.
state
.
rePassBarShow
?
this
.
renderPassStrengthBar
(
'
rePass
'
)
:
null
}
</
Col
>
</
Row
>
<
Row
>
<
Col
span
=
"18"
>
<
Col
span
=
"18"
offset
=
"6"
>
<
Button
type
=
"primary"
onClick
=
{
this
.
handleSubmit
}
>
提交
</
Button
>
</
Col
>
</
Row
>
</
Form
>
</
Modal
>
</
Col
>
</
Row
>
</
Form
>
</
div
>
);
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录