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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 // 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