I learned a trick

Poor man can, but we can not counseling, I want to fight, do not fight me, although I have nothing, but this is now!

1      // Menu rendering is actually a function of the return component 
2      renderMenu = (Data) => {
 . 3          return Data.Map ((Item) => {
 . 4              IF (item.children) {
 . 5                  return (
 . 6                      <SubMenu title = {
 . 7                              <span>
 . 8                                  <Icon type = "mail" />
 . 9                                   <span>} {item.title </ span>
 10                              </ span>
 . 11                          }>
 12 is                          { the this.renderMenu(item.children) }
13                         </SubMenu>
14                 )
15             }
16             return <Menu.Item key={item.key}>{item.title}</Menu.Item>
17         })
18     }

1  // defines an inline style in which a variable 
2   const formItemLayout = {
 . 3      // label representing columns 
. 4                  labelCol: {
 . 5                      span:. 5
 . 6                  },
 . 7      // warpper row representing columns 
. 8                  wrapperCol: {
 . 9                      span: . 19
 10                  }
 11              }
 12 is  
13 is used: <FormItem label = "name:" {... formItemLayout}>    

 React Antd form data collection

 1 class AddUse extends React.Component{
 2         render(){
 3             const formItemLayout = {
 4                 labelCol:{
 5                     span:5
 6                 },
 7                 wrapperCol:{
 8                     span:19
 9                 }
10             }
11             const { getFieldDecorator }  =this.props.form;
12             return (
13                 <Form layout="horizontal">
14                     <FormItem label="姓名:" {...formItemLayout}>
15                         {
16                             getFieldDecorator('usename',{
17                                 initialValue:''
18                             })(
19                                 <Input style={{ width: 160 }} value="员工姓名"/>
20                             )
21                         }
22                     </FormItem>
23                   <FormItem label="年龄:" {...formItemLayout}>
24                      {
25                          getFieldDecorator('useage',{
26                              initialValue:''
27                          })(
28                              <Input style={{ width: 50 }} value="员工年龄"/>
29                          )
30                      }
31                  </FormItem>
32                  <FormItem label="籍贯:" {...formItemLayout}>
33                     {
34                         getFieldDecorator('usejiguan',{
35                             initialValue:''
36                         })(
37                             <Input style={{ width: 130 }} value="员工籍贯"/>
38                         )
39                     }
40                 </FormItem>
41                 </Form>
42             );
43         }
44     }
45     AddUse = Form.create({})(AddUse);

Back to the form

1  // call forms and collect data encapsulation method of ref 
2   <AddUse wrappedComponentRef = {(formData) => {
 . 3             the this .cityForm = formData
 . 4    }} />

Method soaring more form data    

Example 1. New data: a data register new onSubmit

2. Query data Example: Filtering data submitted by parmas up (the default data displayed by holding the input params params api request params get a new line with the data again) filterSubmit

3.modal retrieve data values ​​from the data sheet for details see above React Antd form data collection