React-Modal弹出表单组件操作

React-Modal弹出表单组件操作

1，新建一个表单组件  EditForm.js

 1 import React from 'react';
 2 import { Form, Input, InputNumber } from 'antd';
 3 const { TextArea } = Input
 4 
 5 
 6 class EditForm extends React.Component {
 7     constructor(props) {
 8         super(props);
 9     }
10     componentWillMount(){
11     }
12     componentWillReceiveProps(nextProps){
13     }
14     componentDidMount() {
15       
16     }
17     render() {
18         const { getFieldDecorator } = this.props.form;
19         return <Form labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}>
20             <Form.Item label="账户" >
21                 {getFieldDecorator('username', {
22                     rules: [
23                         {
24                             required: true,
25                             message: '账户',
26                         },
27                     ],
28                     initialValue: this.props.username
29                 })(<Input />)}
30             </Form.Item>
31             <Form.Item label="代码">
32                 {getFieldDecorator('code', {
33                     rules: [
34                         {
35                             required: true,
36                             message: '代码',
37                         },
38                     ],
39                     initialValue: this.props.code
40                 })(<Input  />)}
41             </Form.Item>
42          
43             <Form.Item label="备注">
44             {getFieldDecorator('remark', {
45                 rules: [
46                     {
47                         message: '备注',
48                     },
49                 ],
50                 initialValue: this.props.remark
51             })(
52                 <TextArea row={6} />,
53             )}
54         </Form.Item>
55         </Form>
56 
57     }
58 
59 }
60 export default Form.create({})(EditForm);

View Code