标签：submenu onsubmit ref sed item filter you form display
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 表单数据收集
标签：submenu onsubmit ref sed item filter you form display
原文地址：https://www.cnblogs.com/reeber/p/10977517.html
