需求：选择一个楼，将选择的楼id传给楼层下拉列表，选择楼请求楼层列表，互相搜索。当楼宇没有配置楼层时，添加编辑验证问题时只传选中的楼层id，editecho后台给2个id，select封装成一个form子组件使用。解决表单父组件ordertodisplaydatainitialValue:{},rules:[{required:true,message:"",},],})(//区域内建筑物和楼层的组件)});}select子组件1.初始化和定义两个数组，buildListbuildinglistfloorListfloorliststate={//位置逻辑修改buildList:[],//建筑列表floorList:[],//楼层列表};2.定义一个请求建筑列表的函数//这是楼层的改变方法componentDidMount(){this.init();}init=()=>{//获取建筑列表FloorguideAction.floorGuideMeetingBuildList({}).then((results)=>{console.log(results);let{data=[]}=results;if(!reresults.success){message.error("接口错误",0.5);返回;}this.setState({buildList:数据,});});在render中，遍历buildList数据，渲染到建筑下拉框{/*获取建筑id，也就是传入的key*/}{getFieldDecorator(`build_id`,{//这是默认值initialValue:data.build_id,rules:[{required:true,message:"BuildingCannotbeempty",},],})({setFieldsValue({floor_id:void0,});//切换选择建筑物时，将选择的建筑物id传给floor的函数请求接口，这样id就可以带过来this.getFloorList(value);//在选择建筑物时，清空楼层数据}}placeholder="请选择建筑物"showSearchfilterOption={(input,option)=>option.props.children.toLowerCase().indexOf(input.toLowerCase())>=0}>{buildList.map((item,index)=>(<Optionkey={index}value={item.id}>{item.cn_name}))})}4.定义一个楼层请求接口函数和Assignment//FloorListgetFloorList=(id)=>{MeetingAction.floorList({id}).then((results)=>{let{data=[]}=results;if(!results.success){message.error("接口错误",0.5);return;}this.setState({floorList:data,});});};5.renderfloorrenderingdata{getFieldDecorator(`floor_id`,{//这个数据是父组件传过来的，data是显示的数据editing,initialValue表示编辑时用来回显数据的默认值。initialValue:data.floor_id,rules:[{required:true,message:"floornotconfigured",},],})({flexGrow:1,width:"100%",}}placeholder="请选择楼层"showSearchfilterOption={(input,option)=>;option.props.children.toLowerCase().indexOf(input.toLowerCase())>=0}>{floorList.map((item,index)=>({item.cn_name}))})}componentDidUpdate(prevProps,prevState){if(!_.isEqual(prevProps.data,this.props.data))){让{build_id}=this.props.data;//这是一个生命周期函数，在页面刷新的时候更新，因为在init的时候更新了建筑列表的函数，根据切换选择建筑列表界面来请求楼层，所以更新了建筑列表并且请求没有更新，所以只显示id。所以在本次刷新后更新状态的生命周期函数中更新请求函数。this.getFloorList(build_id);}}
