プロジェクト要件: 製品ツリー ノードをクリックすると、そのノードのすべての親ノードが取得され、表に検索条件を入力して検索機能が完成します。検索結果は下の表に表示されます。 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 ランタイムをインストールするためのサンプル コード
Firefox、Opera、その他のブラウザは Webdings フォントをサポートしていません。回...
この記事では主に、 list-itemの下にある::master疑似要素、 list-style-i...
目次- 序文 - - JVM クラスローダー - 1. JVMクラスローダー2. クラスローダーのソ...
目次解決策1: レプリカを再構築する前提条件アドバンテージ欠点手順マスター奴隷解決策2: データ修復...
最近、毎日変更されるページを iframe を使用して呼び出す必要があるプロジェクトがあります。その...
要件: IIS 7、7.5、8.0、8.5、および ASP.NET で HTTP 応答ヘッダーを削除...
テーブルに table-layer:fixed スタイルを設定し、テーブル内の行が結合されていること...
序文まず、高性能サーバーの高可用性またはホットスタンバイソリューションである Keepalived ...
目次Promise の基本的な使用法: 1. Promiseオブジェクトを作成する2. プロミス方式...
目次序文v-model の修飾子:怠け者トリム番号さまざまな入力タイプやその他の要素での v-mod...
まず、ボックスコラプスとは何でしょうか?親ボックスの内側にあるべき要素が外側にあります。第二に、箱は...
序文このサービスは数か月前からMySQLに導入されています。私の仕事は基本的にターミナルで行われるた...
目次1. 依存関係をインストールする2. vue.config.js ファイルで pwa を設定しま...
ローカルEclipse上にTomcatサーバーを作成する場合、 tomcaインストールディレクトリの...
1. MySQL のインデックスの使用方法インデックスは、特定の列の値を持つ行をすばやく見つけるため...