乐趣区

关于react.js:antd-select联动数据处理

jiezi


需要:

  1. 抉择大厦，把抉择完大厦 id 传给楼层下拉列表，抉择大厦申请楼层列表，相互可搜寻
  2. 大厦没有配置楼层时，做校验

问题 

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

解决
form 表单父组件 

if (key === "floor_ids") {
  return (
    <Form.Item label="所在地区" className="panel-li-title">
      {getFieldDecorator(`floor_ids`, {
        // 无用值 为了展现数据
        initialValue: {},
        rules: [
          {
            required: true,
            message: "",
          },
        ],
      })(
        //   所在地区大厦和楼层的组件
        <FloorSelect2
          form={form}
          // 编辑的时候 拿到了 data 中 后盾返回大厦和楼层的 id 传给子组件
          data={data}
        ></FloorSelect2>
      )}
    </Form.Item>
  );
}

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 数据渲染到大厦下拉框中 

       <Form.Item>
   {/* 拿到大厦 id  这是传递的 key*/}
   {getFieldDecorator(`build_id`, {
     // 这是默认值
     initialValue: data.build_id,
     rules: [
       {
         required: true,
         message: "大厦不能为空",
       },
     ],
   })(
     <Select
       style={{
         minWidth: "3.3rem",
         width: "3.3rem",
         marginRight: "0.12rem",
       }}
       onChange={(value) => {
         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) => (<Option key={index} value={item.id}>
           {item.cn_name}
         </Option>
       ))}
     </Select>
   )}
 </Form.Item>

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 中楼层渲染数据
<Form.Item style={{width: “100%”}}>

      {getFieldDecorator(`floor_id`, {
        // 这个 data 是从父组件传递过去的，data 是编辑时候返显的 data 数据，initialValue 代表默认值 在编辑的时候回显数据应用的
        initialValue: data.floor_id,
        rules: [
          {
            required: true,
            message: "未配置楼层",
          },
        ],
      })(
        <Select
          style={{
            flexGrow: 1,
            width: "100%",
          }}
          placeholder="请抉择楼层"
          showSearch
          filterOption={(input, option) =>
            option.props.children
              .toLowerCase()
              .indexOf(input.toLowerCase()) >= 0
          }
        >
          {floorList.map((item, index) => (<Option key={item.id} value={item.id}>
              {item.cn_name}
            </Option>
          ))}
        </Select>
      )}
    </Form.Item>


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