Daily pit encounter of react

Record problems encountered in daily development (components from Ant Design)

  1. Tree component: when you expand a sibling directory, the previous directory is not closed. Therefore, when tracking the deployment directory in expandedKeys, the elements in the array are a collection of all deployment nodes, which is not easy to obtain. Then, by modifying the onExpand event, the previous directory will be closed for each directory expansion. The specific code is as follows:
 // tree expansion event
  treeOnExpand (expandedKeys, e) {
    if (e.node.props.pos.split('-').length === 3) {
      if (e.node.props.expanded) {
        this.state.treeList[1]--;
      } else {
        this.state.treeList[1]++;
      }
      if (this.state.treeList[1] >= 2) {
        expandedKeys.splice(1, 1);
        this.state.treeList[1]--;
      }
    }
    if (e.node.props.pos.split('-').length === 2) {
      if (e.node.props.expanded) {
        this.state.treeList[0]--;
      } else {
        this.state.treeList[0]++;
      }
      if (this.state.treeList[0] >= 2) {
        expandedKeys.splice(0, expandedKeys.length - 1);
        this.state.treeList[0] = 1;
        this.state.treeList[1] = 0;
      }
    }
  }

    <Tree
        onExpand={this.treeOnExpand}
        expandedKeys={expandedKeys}
        autoExpandParent={autoExpandParent}
        onSelect={this.onSelect}
      >

By changing the value of expandedKeys, you control the level of the deployment.
2. TreeSelect: because the expansion of the drop-down box is a tree structure, it also faces the problem of too many levels of expansion. node.props.root can get the expanded track through the root attribute. The first element of the track is the first node of the expansion, and then the last node is the last node of the expansion. Since the project has only three-tier structure at most, only the first and last nodes in expandedKeys can be selected. The problem is that after the form is submitted, it may be edited again, so the content needs to be filled in again. However, it is found that the trace of TreeSelect's expansion still exists, and there is confusion. This causes the wrong data to be fetched when the node is selected for the second time. Solution:

 <TreeSelect
     style={{ width: '100%' }}
     dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
     treeData={databaseTree}
     placeholder="Please select the primary entity"
     treeDefaultExpandedKeys={[]}
     onSelect={(value, node, extra) => {
      ......
     }}
    />

Through treeDefaultExpandedKeys = {[]} to set the default value, the problem of disordered deployment level can be solved.
3.

Tags: Attribute

Posted on Tue, 24 Mar 2020 11:07:32 -0400 by PHPFEEDER