antd|antd select联动数据处理 antdselect联动数据处理

文章图片

需求:

选择大厦，把选择完大厦id传给楼层下拉列表，选择大厦请求楼层列表，互相可搜索
大厦没有配置楼层时，做校验

问题

新增编辑时只传选择完的楼层id，编辑回显后台给2个id，select封装成form表单子组件使用问题。

解决
form表单父组件

if (key === "floor_ids") { return ( {getFieldDecorator(`floor_ids`, { //无用值为了展示数据 initialValue: {}, rules: [ { required: true, message: "", }, ], })( //所在地区大厦和楼层的组件 )} ); }

select子组件
1.初始化定义两个数组，buildList大厦列表 floorList楼层列表
state = {

//所在地区逻辑修改 buildList: [], //大厦列表 floorList: [], //楼层列表};

2.定义个请求大厦列表的函数

//这是楼层的change方法 componentDidMount() { this.init(); }init = () => { //获取大厦列表 FloorguideAction.floorGuideMeetingBuildList({}).then((results) => { console.log(results); let { data = https://www.it610.com/article/[] } = results; if (!results.success) { message.error("接口错误", 0.5); return; } this.setState({ buildList: data, }); }); };

render中遍历buildList数据渲染到大厦下拉框中

{/* 拿到大厦id这是传递的key*/} {getFieldDecorator(`build_id`, { // 这是默认值 initialValue: data.build_id, rules: [ { required: true, message: "大厦不能为空", }, ], })( { setFieldsValue({ floor_id: void 0, }); // 在切换选择大厦时，把选择完的大厦id传给了楼层请求接口的函数这样就能带过去这个id this.getFloorList(value); // 在选择大厦时，清除掉楼层的数据 }} placeholder="请选择大厦" showSearch filterOption={(input, option) => option.props.children .toLowerCase() .indexOf(input.toLowerCase()) >= 0 } > {buildList.map((item, index) => ( ))})}

【antd|antd select联动数据处理】4.定义一个楼层请求接口的函数并赋值

// 楼层列表 getFloorList = (id) => { MeetingAction.floorList({ id }).then((results) => { let { data = https://www.it610.com/article/[] } = results; if (!results.success) { message.error("接口错误", 0.5); return; } this.setState({ floorList: data, }); }); };

5.render中楼层渲染数据

{getFieldDecorator(`floor_id`, { // 这个data是从父组件传递过来的，data是编辑时候返显的data数据，initialValue代表默认值在编辑的时候回显数据使用的 initialValue: data.floor_id, rules: [ { required: true, message: "未配置楼层", }, ], })(option.props.children .toLowerCase() .indexOf(input.toLowerCase()) >= 0 } > {floorList.map((item, index) => ( ))})} componentDidUpdate(prevProps, prevState) { if (!_.isEqual(prevProps.data, this.props.data)) { let { build_id } = this.props.data; // 这个是在页面刷新就更新的生命周期函数，因为大厦列表的函数在init的时候更新的，楼层是基于切换选择大厦列表才请求的接口，所以大厦列表更新了这个请求没有更新导致只展示id 所以在这个刷新就更新state的生命周期函数里更新一下这个请求函数 this.getFloorList(build_id); } }