プロジェクト要件: 製品ツリー ノードをクリックすると、そのノードのすべての親ノードが取得され、表に検索条件を入力して検索機能が完成します。検索結果は下の表に表示されます。 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の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: RR および RC 分離レベルでのインデックスとロックのテスト スクリプトのサンプル コード
>>: Linux に ASPNET.Core3.0 ランタイムをインストールするためのサンプル コード
新しく作成された Web サイトの場合は、ASP.NET MVC5 を例に挙げます。セッションを処理...
目次序文インストールと設定1. Echartsをインストールする2. Echartsをグローバルに導...
コンテナと呼ばれるものは、実際には親イメージに基づいて読み取りおよび書き込み可能なファイル階層を作成...
時間差関数 TIMESTAMPDIFF と DATEDIFF の使用SQL ステートメント、特にスト...
1. 固定幅+適応型期待される効果: 左側は固定幅、右側は適応幅 共通コード: html: <...
目次1. JavaScriptの問題2. TypeScriptの利点3. TypeScriptの欠点...
1.ファビコン.cc ico アイコンの Web サイトをオンラインで作成するには、画像をアップロー...
この記事では、例を使用して、MySQL 8 の共通テーブル式 (CTE) の使用方法を説明します。ご...
目次序文:実装手順:完全なソースコード:詳細情報:序文: vueでは、デフォルトページを実装し、di...
同じサーバーで、Docker を使用して Mysql のマスター スレーブ同期設定をシミュレートしま...
解決策は2つあります。 1つはCSSで、background-size:coverを使用して画像の伸...
この記事では、シンプルな HTML ビデオ プレーヤーを実装する方法を紹介し、皆さんと共有します。詳...
この記事では、MySQL 8.0.16圧縮パッケージのインストールと設定方法を参考までに紹介します。...
テンプレート 1: ログイン.vue <テンプレート> <p class=&quo...
目次1 テストケース2 JS配列重複排除4種類2.1 要素の比較2.1.1 二重層 for ループ比...