学了一招

男人可以穷，但绝对不能怂，拼我想要的，争我没有的，虽然我一无所有，但这只是现在！

 1     // 菜单渲染   实际是一个返回组件的函数
 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                         { this.renderMenu(item.children) }
13                         </SubMenu>
14                 )
15             }
16             return <Menu.Item key={item.key}>{item.title}</Menu.Item>
17         })
18     }

 1 //定义一个行内样式 放在一个变量里面 
 2  const formItemLayout = {
 3     //label  占几列
 4                 labelCol:{
 5                     span:5
 6                 },
 7     //wrapper行占几列
 8                 wrapperCol:{
 9                     span:19
10                 }
11             }
12 
13 使用：<FormItem label="姓名:" {...formItemLayout}>    

 React Antd表单数据收集

 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);

返回表单

1 //调用表单并收集数据      ref的封装方法
2  <AddUse wrappedComponentRef={(formData)=>{
3            this.cityForm = formData
4   }}/>

表单数据  疯长的方法 more    

1.新增数据   例：注册  新增一个数据    onSubmit

2.查询数据  例：过滤数据  通过提交上去的parmas    （默认显示的数据，通过输入params 拿着这个params 再次请求api 获取新的符合 params的数据）  filterSubmit

3.modal  数据表单 获取数据值    详情请看上面的React Antd 表单数据收集