antd select联动数据处理

antd select联动数据处理_第1张图片
需求:

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

问题

  新增编辑时只传选择完的楼层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 = [] } = results;
  if (!results.success) {
    message.error("接口错误", 0.5);
    return;
  }
  this.setState({
    buildList: data,
  });
});
};
  1. render中遍历buildList数据渲染到大厦下拉框中

       
       {/* 拿到大厦id  这是传递的key*/}
       {getFieldDecorator(`build_id`, {
         // 这是默认值
         initialValue: data.build_id,
         rules: [
           {
             required: true,
             message: "大厦不能为空",
           },
         ],
       })(
         
       )}
     
    

4.定义一个楼层请求接口的函数 并赋值

  // 楼层列表
  getFloorList = (id) => {
    MeetingAction.floorList({ id }).then((results) => {
      let { data = [] } = 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: "未配置楼层",
          },
        ],
      })(
        
      )}
    


   componentDidUpdate(prevProps, prevState) {
      if (!_.isEqual(prevProps.data, this.props.data)) {
        let { build_id } = this.props.data;
        // 这个是在页面刷新就更新的生命周期函数,因为大厦列表的函数在init的时候更新的,楼层是基于切换选择大厦列表才请求的接口,所以大厦列表更新了 这个请求没有更新导致只展示id 所以在这个刷新就更新state的生命周期函数里更新一下这个请求函数
        this.getFloorList(build_id);
      }
    }

你可能感兴趣的