需要:

  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);      }    }