Antd select linkage data processing

Time:2021-10-19

Antd select linkage data processing
Requirements:

  1. Select the building, pass the selected building ID to the floor drop-down list, select the building request floor list, and search each other
  2. When there is no floor in the building, check it

problem

When adding and editing, only the selected floor ID is transmitted, and the editing echo is given to two IDS in the background. The select is encapsulated into the use problem of the form sub component.

solve
Form parent component

if (key === "floor_ids") {
  return (
    < form. Item label = "region" classname = "panel Li title" >
      {getFieldDecorator(`floor_ids`, {
        //Useless values to show data
        initialValue: {},
        rules: [
          {
            required: true,
            message: "",
          },
        ],
      })(
        //Components of buildings and floors in the area
        <FloorSelect2
          form={form}
          //When editing, get the ID of the building and floor returned from the background in the data and pass it to the sub component
          data={data}
        ></FloorSelect2>
      )}
    </Form.Item>
  );
}

Select subcomponent
1. Initialize and define two arrays, buildlist building list floorlist floor list
state = {

//Logical modification of region
Buildlist: [], // building list
Floorlist: [], // floor list};

2. Define a function to request the building list

//This is the change method of the floor
componentDidMount() {
   this.init();
 }

init = () => {
//Get building list
FloorguideAction.floorGuideMeetingBuildList({}).then((results) => {
  console.log(results);
  let { data = [] } = results;
  if (!results.success) {
    Message. Error ("interface error", 0.5);
    return;
  }
  this.setState({
    buildList: data,
  });
});
};
  1. Traverse the buildlist data in render and render it to the building drop-down box

    <Form.Item>
       {/ * get the building ID. this is the key * /}
       {getFieldDecorator(`build_id`, {
         //This is the default
         initialValue: data.build_id,
         rules: [
           {
             required: true,
             Message: "the building cannot be empty",
           },
         ],
       })(
         <Select
           style={{
             minWidth: "3.3rem",
             width: "3.3rem",
             marginRight: "0.12rem",
           }}
           onChange={(value) => {
             setFieldsValue({
               floor_id: void 0,
             });
             //When switching the selected building, the selected building ID is passed to the function of the floor request interface, so that the ID can be brought
             this.getFloorList(value);
             //When selecting a building, clear the data of the floor
           }}
           Placeholder = "please select a building"
           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. Define a function of floor request interface and assign a value

//Floor list
  getFloorList = (id) => {
    MeetingAction.floorList({ id }).then((results) => {
      let { data = [] } = results;
      if (!results.success) {
        Message. Error ("interface error", 0.5);
        return;
      }
      this.setState({
        floorList: data,
      });
    });
  };

5. Floor rendering data in render
<Form.Item style={{ width: “100%” }}>

{getFieldDecorator(`floor_id`, {
        //This data is passed from the parent component. Data is the data returned during editing, and initialvalue represents the default value used to echo the data during editing
        initialValue: data.floor_id,
        rules: [
          {
            required: true,
            Message: "floor not configured",
          },
        ],
      })(
        <Select
          style={{
            flexGrow: 1,
            width: "100%",
          }}
          Placeholder = "please select a floor"
          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;
        //This is the life cycle function that is updated when the page is refreshed. Because the function of the building list is updated at init, and the floor is requested based on switching and selecting the building list, the building list is updated. The request is not updated, resulting in only displaying the ID. therefore, update the request function in the life cycle function of the refresh update state
        this.getFloorList(build_id);
      }
    }