antd ツリーと親子コンポーネント間の値転送問題について (React のまとめ)

antd ツリーと親子コンポーネント間の値転送問題について (React のまとめ)

プロジェクト要件: 製品ツリー ノードをクリックすると、そのノードのすべての親ノードが取得され、表に検索条件を入力して検索機能が完成します。検索結果は下の表に表示されます。

3 つのコンポーネントが記述されました:

これで、ビジネス シナリオのインタラクションができました。orderTree コンポーネントのツリー ノードをクリックし、現在のノードとすべての親ノードの ID を取得し、それらをオブジェクト arrKeys に格納して、orderForm コンポーネントで使用します (タイプ ドロップダウン選択ボックスをバックフィルし、objId オブジェクトをクエリ インターフェイスの入力パラメータとして使用します)。

これで、問題を部分的に解決できます。

1. まず、クリックしたツリーノードとすべての親ノードのIDを取得します ---arrKeys

2. ツリー ノードをクリックして現在のノードとすべての親ノードを取得した後、this.props.idObject(arrKeys) を介して arrKeys を親コンポーネントに渡します。

3. ツリーコンポーネントとフォームコンポーネントのcomponentDidMountライフサイクルで、コンポーネント全体を親コンポーネントに渡します。

4. フォームコンポーネントの inquery メソッド:

tree.jsコードが添付されました

React をインポートします。{ コンポーネント } から 'react' をインポートします。
'dva' から connect をインポートします。
'antd' から { Divider、Modal、Table、message、Tag、Spin } をインポートします。
'umi/router' からルーターをインポートします。
'../style.less' からスタイルをインポートします。
'antd' から { Tree, Input } をインポートします。

const { confirm } = モーダル;
TreeNode を Tree に設定します。
const { 検索 } = 入力;
データリストを [] にします。
let keysObj = {}; // 現在のノードとすべての親ノードのID
let firstParentKey = {}; // 第 1 レベルのルート ノード ID
const intetorFun = (データ、キー、文字列) => {
  if (文字列) {
    最初の親キー = {
      [データ.パラメータ]: データ.パラメータId、
    };
  }
  (data.children && data.children.length !== 0) の場合 {
    data.children.forEach(アイテム => {
      if (item.id === key[0]) {
        キーオブジェクト = {
          [データ.パラメータ]: データ.パラメータId、
          [item.param]: アイテム.paramId、
          ...最初の親キー、
        };
      } それ以外 {
        intetorFun(アイテム、キー);
      }
    });
  }
  keysObj を返します。
};
const getParentKey = (キー、ツリー) => {
  親キーを [] とします。
  (i = 0 とします; i < tree.length; i++) {
    定数ノード = tree[i];
    親キー = intetorFun(ノード、キー、'firstTime');
  }
  親キーを返します。
};
//検索 const getSearchKey = (key, tree) => {
  親キーを作成します。
  (i = 0 とします; i < tree.length; i++) {
    定数ノード = tree[i];
    ノードの子の場合{
      if (node.children.some(item => item.id === key)) {
        親キー = ノードID;
      } そうでない場合 (getSearchKey(key, node.children)) {
        親キー = getSearchKey(キー、ノードの子);
      }
    } それ以外 {
      if (node.id === キー) {
        親キー = ノードID;
      }
    }
  }
  親キーを返します。
};

@connect(({ 商品、読み込み、メニュー }) => ({
  商品、
  読み込み中: loading.effects['commodity/getTree'],
  メニュー、
}))
クラス OrderTree は Component を拡張します {
  コンストラクタ(props) {
    スーパー(小道具);
    この状態 = {
      expandKeys: [], //第1レベルのルートノードのデフォルトの拡張 props.commodity.defaultParentIdList
      検索値: ''、
      自動展開親: true、
    };
  }
  コンポーネントマウント() {
    const { ディスパッチ } = this.props;
    this.props.treeRef && this.props.treeRef(this); //マウント時にツリーコンポーネント全体を親コンポーネントに渡します。dispatch({
      タイプ: 'commodity/getTree',
      コールバック: res => {
        このリストを生成します(res.data);
        const defaultParentIdList = res.data.map(item => item.id);
        this.setState({
          拡張キー: defaultParentIdList、
        });
      },
    });
  }
  生成リスト = データ => {
    const { ディスパッチ } = this.props;
    (i = 0 とします; i < data.length; i++) {
      定数ノード = データ[i];
      const { id, name } = ノード;
      データリストをプッシュします({id, name});
      急送({
        タイプ: '商品/保存'、
        ペイロード: {
          データリスト、
        },
      });
      ノードの子の場合{
        ノードの子のリストを生成します。
      }
    }
  };

  //ノードを展開/折りたたんだときにトリガーされます onExpand = expandKeys => {
    this.setState({
      拡張キー、
      自動展開親: true、
    });
  };
  //ツリーノードをクリックしたときにトリガーされます onSelect = (selectKeys, e) => {
    const { ディスパッチ } = this.props;
    定数{
      商品: { treeData },
    } = this.props;
    arrKeys = {} とします。
    //コードはノードが選択されている場合にのみ実行されます。dataRef は TreeNode に追加されたカスタム属性で、現在のノードのすべての情報を取得できます。if (e.selected && e.node.props.dataRef.param !== 'categoryId') {
      キーオブジェクト = {};
      最初の親キー = {};
      arrKeys = getParentKey(selectKeys、treeData);
    } そうでない場合 (e.selected && e.node.props.dataRef.param === 'categoryId') {
      キーオブジェクト = {};
      最初の親キー = {};
      arrKeys = {
        カテゴリID: e.node.props.dataRef.paramId、
      };
    } そうでない場合 (!e.selected) {
      false を返します。
    }
    this.props.idObject(arrKeys);
  };
  // 検索関数 onChange = e => {
    定数{値} = e.target;
    定数{
      商品: { treeData, dataList, defaultParentIdList },
    } = this.props;
    拡張キーを [] とします。
    if (値) {
      展開キー = データリスト
        .map(アイテム => {
          if (item.name.toLowerCase().indexOf(value.toLowerCase()) > -1) {
            //大文字と小文字を区別しません。getSearchKey(item.id, treeData); を返します。
          }
          null を返します。
        })
        .filter((item, i, self) => item && self.indexOf(item) === i);
      this.setState({
        拡張キー、
        検索値: 値、
        自動展開親: true、
      });
    } それ以外 {
      this.setState({
        拡張キー: defaultParentIdList、
        検索値: ''、
        自動展開親: true、
      });
    }
  };

  与える() {
    const { searchValue、expandedKeys、autoExpandParent } = this.state;
    定数{
      商品: { treeData },
      読み込み中、
    } = this.props;
    定数ループ = データ =>
      データ.map(アイテム => {
        const index = item.name.toLowerCase().indexOf(searchValue.toLowerCase()); //大文字と小文字を区別しない const beforeStr = item.name.substr(0, index);
        const afterStr = item.name.substr(インデックス + searchValue.length);
        const centerStr = item.name.substr(インデックス、検索値.長さ);
        定数タイトル =
          インデックス > -1 ? (
            <span title={item.name}>
              {前Str}
              <span style={{ color: '#f50' }}>{centerStr}</span>
              {afterStr}
            </span>
          ) : (
            <span title={item.name}>{item.name}</span>
          );
        if (item.children) {
          戻る (
            <TreeNode キー = {item.id} タイトル = {title} データ参照 = {item}>
              {loop(item.children)}
            </ツリーノード>
          );
        }
        <TreeNode key={item.id} title={title} dataRef={item} /> を返します。
      });
    戻る (
      <Spin spinning={loading}>
        <div>
          <検索 style={{ marginBottom: 8 }} placeholder="検索" onChange={this.onChange} />
          <木
            onExpand={this.onExpand}
            onSelect={this.onSelect}
            展開キー = {展開キー}
            autoExpandParent={autoExpandParent}
          >
            {ループ(ツリーデータ)}
          </ツリー>
        </div>
      </スピン>
    );
  }
}

デフォルトの OrderTree をエクスポートします。

親コンポーネントのindex.jsコード:

React をインポートします。{ コンポーネント } から 'react' をインポートします。
'dva' から connect をインポートします。
'umi/locale' から formatMessage、FormattedMessage をインポートします。
'antd' から { Card, Spin } をインポートします。
'@/components/PageHeaderWrapper' から PageHeaderWrapper をインポートします。
'./components/form' から OrderForm をインポートします。
'./components/table' から OrderTable をインポートします。
'./components/tree' から OrderTree をインポートします。
'./style.less' からスタイルをインポートします。
'tslint/lib/test' から consoleTestResultHandler をインポートします。

// dataList = [] とします。

@connect(({ 商品、読み込み、メニュー }) => ({
  商品、
  読み込み中: loading.effects['commodity/getTree'],
  メニュー、
}))
クラス OrderPage は Component を拡張します {
  コンストラクタ() {
    素晴らしい();
    この状態 = {
      idオブジェクト: {},
      反応フラグ: false、
    };
  }
  コンポーネントマウント() {
    const { ディスパッチ } = this.props;
    急送({
      タイプ: 'commodity/getGoodsCategory',
    });
  }
  onRef = ref => {
    this.orderForm = ref;
  };
  ツリー参照 = ref => {
    this.orderTree = ref;
  };
  getIdObject = データ => {
    this.setState() は、
      {
        idObject: データ、
      },
      () => {
        this.orderForm.props.form.setFieldsValue({
          カテゴリID: [文字列(data.categoryId)],
        });
        this.orderForm.inquery(データ);
      }
    );
  };
  //リセットボタンがクリックされたかどうかを判定する isReact = ref => {
    定数{
      商品: { defaultParentIdList },
    } = this.props;
    (参照)の場合{
      this.orderTree.setState({
        拡張キー: defaultParentIdList、
      });
    }
  };

  与える() {
    戻る (
      <PageHeaderWrapper ロゴ>
        <Card bordered={false} title="製品 SPU リスト" className={style.antCardBox}>
          <div
            style={{ width: '350px', marginRight: '30px', boxShadow: '3px -3px 6px 0px #ccc6' }}
            クラス名={style.antTreeBox}
          >
            <OrderTree idObject={this.getIdObject} treeRef={this.treeRef} />
          </div>
          <div style={{ flex: '1' }}>
            <オーダーフォーム onRef={this.onRef} isReact={this.isReact} />
            <注文テーブル />
          </div>
        </カード>
      </ページヘッダーラッパー>
    );
  }
}

デフォルトの OrderPage をエクスポートします。

以上が、antdツリーと親子コンポーネント間の値転送問題の詳細です(React要約)。antdツリー親子コンポーネント間の値転送の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • React 非親子コンポーネントパラメータ渡しのサンプルコード
  • React親子コンポーネント通信実装方法
  • 親コンポーネントと子コンポーネント間で値を渡すReactメソッド
  • 親コンポーネントと子コンポーネント間のReact通信プロパティ
  • Reactの親子コンポーネント転送とその他の重要なポイントの詳細な説明
  • react.js 親子コンポーネント データ バインディング リアルタイム通信 サンプル コード
  • React親子コンポーネント値転送(コンポーネント通信)実装方法

<<:  RR および RC 分離レベルでのインデックスとロックのテスト スクリプトのサンプル コード

>>:  Linux に ASPNET.Core3.0 ランタイムをインストールするためのサンプル コード

推薦する

ApplicationHost.config (IIS ストレージ構成領域ファイル) の概要

新しく作成された Web サイトの場合は、ASP.NET MVC5 を例に挙げます。セッションを処理...

Echart Bar の 2 列チャート スタイルの最も完全な詳細な説明

目次序文インストールと設定1. Echartsをインストールする2. Echartsをグローバルに導...

Dockerのローカルイメージ作成方法の分析

コンテナと呼ばれるものは、実際には親イメージに基づいて読み取りおよび書き込み可能なファイル階層を作成...

MySQL の時間差関数 TIMESTAMPDIFF と DATEDIFF の使用

時間差関数 TIMESTAMPDIFF と DATEDIFF の使用SQL ステートメント、特にスト...

CSS マルチカラムレイアウトソリューション

1. 固定幅+適応型期待される効果: 左側は固定幅、右側は適応幅 共通コード: html: <...

TypeScript とは何ですか?

目次1. JavaScriptの問題2. TypeScriptの利点3. TypeScriptの欠点...

実用的なウェブオンラインツール12選

1.ファビコン.cc ico アイコンの Web サイトをオンラインで作成するには、画像をアップロー...

mysql8 共通テーブル式 CTE 使用例の分析

この記事では、例を使用して、MySQL 8 の共通テーブル式 (CTE) の使用方法を説明します。ご...

Vue でフルスクリーンを実装し、フルスクリーン終了を監視する

目次序文:実装手順:完全なソースコード:詳細情報:序文: vueでは、デフォルトページを実装し、di...

Docker環境でMySQLを実行し、Binlogを有効にしてマスタースレーブ同期を構成する方法

同じサーバーで、Docker を使用して Mysql のマスター スレーブ同期設定をシミュレートしま...

ウェブページの背景画像を伸ばす2つの方法

解決策は2つあります。 1つはCSSで、background-size:coverを使用して画像の伸...

シンプルな HTML ビデオ プレーヤーを実装する方法

この記事では、シンプルな HTML ビデオ プレーヤーを実装する方法を紹介し、皆さんと共有します。詳...

MySQL 8.0.16 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.16圧縮パッケージのインストールと設定方法を参考までに紹介します。...

Vue でログインと登録テンプレートを実装するためのサンプルコード

テンプレート 1: ログイン.vue <テンプレート> <p class=&quo...

JS配列重複排除の詳細

目次1 テストケース2 JS配列重複排除4種類2.1 要素の比較2.1.1 二重層 for ループ比...