test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 11:08:45 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

docs: update demos of Form

Browse Source
This commit is contained in:
Benjy Cui 2016-04-12 15:18:57 +08:00
parent 5bb8e31ad4
commit 10edd74f33
2 changed files with 103 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
components/form/demo/form-in-modal.md Normal file
View File

@ -0,0 +1,64 @@
# 与 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);
````

83
components/form/demo/validate-customized.md
View File

@ -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>
<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>
<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>
<Col span="6">
{this.state.rePassBarShow ? this.renderPassStrengthBar('rePass') : null}
</Col>
</Row>
</Form>
</Modal>
</Col>
</Row>
</Form>
</div>
);
}