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

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 をエクスポートします。

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 をエクスポートします。