提交 10edd74f 编写于 作者: B Benjy Cui

docs: update demos of Form

上级 5bb8e31a
# 与 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);
````
......@@ -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.
先完成此消息的编辑!
想要评论请 注册