Über das Wertübertragungsproblem zwischen Antd-Baum und übergeordneten und untergeordneten Komponenten (Reaktionszusammenfassung)

importiere React, {Komponente} von „react“;
importiere { connect } von „dva“;
importiere { Teiler, Modal, Tabelle, Nachricht, Tag, Spin} von 'antd';
Router von „umi/router“ importieren;
Stil aus „../style.less“ importieren;
importiere { Baum, Eingabe } von 'antd';

const { bestätigen } = Modal;
const { TreeNode } = Baum;
const { Suche } = Eingabe;
Lassen Sie Datenliste = [];
let keysObj = {}; // Die ID des aktuellen Knotens und aller übergeordneten Knoten
let firstParentKey = {}; // ID des Stammknotens der ersten Ebene
const intetorFun = (Daten, Schlüssel, Zeichenfolge) => {
  wenn (Zeichenfolge) {
    ersterÜbergeordneterSchlüssel = {
      [Datenparam]: DatenparamId,
    };
  }
  wenn (Daten.Kinder && Daten.Kinder.Länge !== 0) {
    data.children.forEach(item => {
      wenn (item.id === key[0]) {
        SchlüsselObj = {
          [Datenparam]: DatenparamId,
          [Artikel.param]: Artikel.paramId,
          ...ersterElternschlüssel,
        };
      } anders {
        intetorFun(Element, Schlüssel);
      }
    });
  }
  Schlüsselobjekt zurückgeben;
};
const getParentKey = (Schlüssel, Baum) => {
  lass parentKey = [];
  für (lass i = 0; i < Baumlänge; i++) {
    const Knoten = Baum[i];
    parentKey = intetorFun(Knoten, Schlüssel, „firstTime“);
  }
  gibt den übergeordneten Schlüssel zurück;
};
//Suche const getSearchKey = (Schlüssel, Baum) => {
  lass übergeordneten Schlüssel;
  für (lass i = 0; i < Baumlänge; i++) {
    const Knoten = Baum[i];
    wenn (Knoten.Kinder) {
      wenn (node.children.some(item => item.id === key)) {
        übergeordneter Schlüssel = Knoten-ID;
      } sonst wenn (getSearchKey(Schlüssel, node.children)) {
        parentKey = getSearchKey(Schlüssel, Knoten.Kinder);
      }
    } anders {
      wenn (node.id === Schlüssel) {
        übergeordneter Schlüssel = Knoten-ID;
      }
    }
  }
  gibt den übergeordneten Schlüssel zurück;
};

@connect(({ Ware, wird geladen, Menü }) => ({
  Ware,
  wird geladen: wird geladen.effects['commodity/getTree'],
  Speisekarte,
}))
Klasse OrderTree erweitert Komponente {
  Konstruktor(Requisiten) {
    super(Requisiten);
    dieser.Zustand = {
      expandedKeys: [], //Standarderweiterung des Stammknotens der ersten Ebene props.commodity.defaultParentIdList
      Suchwert: '',
      autoExpandParent: true,
    };
  }
  componentDidMount() {
    const { dispatch } = diese.props;
    this.props.treeRef && this.props.treeRef(this); //Übergeben Sie die gesamte Baumkomponente an die übergeordnete Komponente, wenn Sie dispatch({ mounten.
      Typ: 'Ware/getTree',
      Rückruf: res => {
        dies.generateList(res.data);
        const defaultParentIdList = res.data.map(item => item.id);
        dies.setState({
          erweiterteSchlüssel: defaultParentIdList,
        });
      },
    });
  }
  Liste generieren = Daten => {
    const { dispatch } = diese.props;
    für (lass i = 0; i < Datenlänge; i++) {
      const Knoten = Daten[i];
      const { id, name } = Knoten;
      });
      versenden({
        Typ: 'Ware/Sparen',
        Nutzlast: {
          Datenliste,
        },
      });
      wenn (Knoten.Kinder) {
        dies.generateList(node.children);
      }
    }
  };

  //Wird beim Erweitern/Reduzieren von Knoten ausgelöst onExpand = expandedKeys => {
    dies.setState({
      erweiterteSchlüssel,
      autoExpandParent: true,
    });
  };
  //Wird beim Klicken auf einen Baumknoten ausgelöst onSelect = (selectKeys, e) => {
    const { dispatch } = diese.props;
    Konstante {
      Ware: { treeData },
    } = diese.Eigenschaften;
    lass arrKeys = {};
    //Der Code wird nur ausgeführt, wenn der Knoten ausgewählt ist. dataRef ist ein benutzerdefiniertes Attribut, das zu TreeNode hinzugefügt wird und alle Informationen des aktuellen Knotens abrufen kann, wenn (e.selected && e.node.props.dataRef.param !== 'categoryId') {
      SchlüsselObj = {};
      ersterÜbergeordneterSchlüssel = {};
      arrKeys = getParentKey(selectKeys, treeData);
    } sonst wenn (e.selected && e.node.props.dataRef.param === 'categoryId') {
      SchlüsselObj = {};
      ersterÜbergeordneterSchlüssel = {};
      arrKeys = {
        Kategorie-ID: e.node.props.dataRef.paramId,
      };
    } sonst wenn (!e.selected) {
      gibt false zurück;
    }
    dies.props.idObject(arrKeys);
  };
  // Suchfunktion onChange = e => {
    const { Wert } = e.Ziel;
    Konstante {
      Ware: { Baumdaten, Datenliste, Standard-ÜbergeordneteID-Liste },
    } = diese.Eigenschaften;
    let erweiterteSchlüssel = [];
    wenn (Wert) {
      erweiterteSchlüssel = Datenliste
        .map(Element => {
          wenn (Element.Name.toLowerCase().Index von (Wert.toLowerCase()) > -1) {
            //Groß-/Kleinschreibung nicht beachten return getSearchKey(item.id, treeData);
          }
          gibt null zurück;
        })
        .filter((Element, i, selbst) => Element und selbst.indexOf(Element) === i);
      dies.setState({
        erweiterteSchlüssel,
        Suchwert: Wert,
        autoExpandParent: true,
      });
    } anders {
      dies.setState({
        erweiterteSchlüssel: defaultParentIdList,
        Suchwert: '',
        autoExpandParent: true,
      });
    }
  };

  rendern() {
    const { Suchwert, erweiterteSchlüssel, autoExpandParent } = dieser.Status;
    Konstante {
      Ware: { treeData },
      Laden,
    } = diese.Eigenschaften;
    const-Schleife = Daten =>
      Daten.map(Element => {
        const index = item.name.toLowerCase().indexOf(searchValue.toLowerCase()); //Groß-/Kleinschreibung ignorieren const beforeStr = item.name.substr(0, index);
        const afterStr = item.name.substr(index + suchwert.länge);
        const centerStr = item.name.substr(index, suchwert.länge);
        Konstanttitel =
          index > -1 ? (
            <span Titel={Artikelname}>
              {vorStr}
              <span style={{ color: '#f50' }}>{centerStr}</span>
              {afterStr}
            </span>
          ) : (
            <span Titel={Artikelname}>{Artikelname}</span>
          );
        wenn (Element.Kinder) {
          zurückkehren (
            <TreeNode Schlüssel={item.id} Titel={Titel} dataRef={item}>
              {Schleife(Element.Kinder)}
            </TreeNode>
          );
        }
        Rückgabewert <TreeNode key={item.id} title={title} dataRef={item} />;
      });
    zurückkehren (
      <Spin spinning={wird geladen}>
        <div>
          <Suchstil={{ marginBottom: 8 }} Platzhalter="Suchen" onChange={this.onChange} />
          <Baum
            beiExpand={dies.beiExpand}
            bei Auswahl = {diese.beiAuswahl}
            erweiterteSchlüssel={erweiterteSchlüssel}
            autoExpandParent={autoExpandParent}
          >
            {Schleife(Baumdaten)}
          </Baum>
        </div>
      </Drehen>
    );
  }
}

Standard-OrderTree exportieren;

importiere React, {Komponente} von „react“;
importiere { connect } von „dva“;
importiere { formatMessage, FormatierteMessage } von 'umi/locale';
importiere { Karte, Spin } von 'antd';
importiere PageHeaderWrapper aus „@/components/PageHeaderWrapper“;
importiere OrderForm aus „./components/form“;
importiere OrderTable aus „./components/table“;
importiere OrderTree aus „./components/tree“;
Stil aus „./style.less“ importieren;
importiere { consoleTestResultHandler } aus 'tslint/lib/test';

// lass dataList = [];

@connect(({ Ware, wird geladen, Menü }) => ({
  Ware,
  wird geladen: wird geladen.effects['commodity/getTree'],
  Speisekarte,
}))
Klasse OrderPage erweitert Komponente {
  Konstruktor() {
    super();
    dieser.Zustand = {
      idObjekt: {},
      reactFlag: falsch,
    };
  }
  componentDidMount() {
    const { dispatch } = diese.props;
    versenden({
      Typ: 'Ware/GetGoodsCategory',
    });
  }
  beiRef = ref => {
    diese.Bestellform = ref;
  };
  BaumRef = ref => {
    dies.orderTree = ref;
  };
  getIdObject = Daten => {
    dies.setState(
      {
        idObject: Daten,
      },
      () => {
        diese.orderForm.props.form.setFieldsValue({
          Kategorie-IDs: [String(data.categoryId)],
        });
        this.orderForm.inquery(Daten);
      }
    );
  };
  //Beurteilen, ob die Reset-Taste gedrückt wurde isReact = ref => {
    Konstante {
      Ware: { defaultParentIdList },
    } = diese.Eigenschaften;
    wenn (ref) {
      dies.orderTree.setState({
        erweiterteSchlüssel: defaultParentIdList,
      });
    }
  };

  rendern() {
    zurückkehren (
      <PageHeaderWrapper-Logo>
        <Card bordered={false} title="Produkt-SPU-Liste" className={style.antCardBox}>
          <div
            Stil = {{ Breite: '350px', rechter Rand: '30px', Boxschatten: '3px -3px 6px 0px #ccc6' }}
            Klassenname={style.antTreeBox}
          >
            <OrderTree idObject={this.getIdObject} treeRef={this.treeRef} />
          </div>
          <div Stil={{ flex: '1' }}>
            <OrderForm onRef={this.onRef} isReact={this.isReact} />
            <Bestelltabelle />
          </div>
        </Karte>
      </PageHeaderWrapper>
    );
  }
}

Standard-Bestellseite exportieren;