別のSPリストの列値に基づいてSPリストをフィルタリングします。 SPFX

2020-02-13 sharepoint spfx

2つのリストを表示するWebパーツを作成しています。リストA(ソース)およびリストB(フィルター対象)。 リストAで選択した内容に基づいてリストBをフィルタリングする必要があります。 したがって、ユーザーがリストAのアイテム1をクリックすると、関連するリストBのすべてのアイテムが表示されます。以下のコードの各リスト間の関係列は次のとおりです。

リストA: RelatedItemsこれには、この1つのアイテムに関連するBのすべてのアイテムをリストする単一行のテキスト列があります。

リストB: MasterItemこれには、 マスターアイテムのIDをリストする1行のテキスト列があります。

2つのリスト:

private _onRenderListA(item: IListAItem) {

    return (

      <div>

        <tr>
          <td style={{ width: '80px' }}>{item.Id}</td>
          <td style={{ width: '250px' }}>{item.Title}</td>
          <td style={{ width: '200px' }}>{item.RelatedItems}</td>
          <td style={{ width: '15px' }}>
            <div className={styles.editIcon}><Icon iconName="Filter" id={item.Id.toString()} onClick={this._editItem} />
            </div>
          </td>
        </tr>

      </div>
    );
  }

  private _onRenderListB(item: IListBItem) {

    return (

      <div>

        <tr>
          <td style={{ width: '80px' }}>{item.Id}</td>
          <td style={{ width: '250px' }}>{item.Title}</td>
          <td style={{ width: '200px' }}>{item.MasterItem}</td>    

        </tr>

      </div>
    );
  }

SPからアイテムを取得する関数:

public _getListItems() {
    sp.web.lists.getByTitle("ListA").items.get().then((items: any[]) => {
      let returnedItems: IListAItem[] = items.map((item) => { return new ListAItem(item); });

      this.setState({ 
        Items: returnedItems,
        ListAItems: returnedItems,

      });
    });
    sp.web.lists.getByTitle("ListB").items.get().then((items: any[]) => {
      let returnedItems: IListBItem[] = items.map((item) => { return new ListBItem(item); });

      this.setState({ 

        ListBItems: returnedItems,
      });
    });

  }

リストAの各アイテムの横にあるクリック可能なボタンの機能:

private _editItem = (ev: React.MouseEvent<HTMLElement>) => {

    const sid = Number(ev.currentTarget.id);
   console.log(this.state.ListBItems);
    let _item = this.state.ListBItems.filter((item) => { return item.Id === sid; });
    if (_item && _item.length > 0) {

      this.setState({

        Id: sid,
       ListBItems: _item

      }, () => {
        console.log(_item);
        console.log(this.state.Items);
        console.log(this.state.ListBItems);
      });
    }
  }

リストAのアイテムをクリックすると、リストBをフィルタリングしてIdに一致させますが、リストBのMasterItem列またはリストAのRelatedItemsの値を使用してリストBをRelatedItemsます。

変更できたら

let _item = this.state.ListBItems.filter((item) => { return item.Id === sid; });

言う:

let _item = this.state.ListBItems.filter((item) => { return item.MasterItem === sid; }); それはうまくいくと思うが、私はそれを試してみたが、何も返さない。

更新:

私はこれを使用すると考えています:

 private _editItem = (ev: React.MouseEvent<HTMLElement>) => {

    const sid = Number(ev.currentTarget.id);
   console.log(this.state.ListBItems);
    let _item = this.state.ListBItems.filter((item) => { return item.Id === sid; });

    if (_item && _item.length > 0) {

      sp.web.lists.getByTitle("ListB").items.get().then((items: any[]) => {
        let returnedItems: IListBItem[] = items.map((item) => { return new ListBItem(item); });

        this.setState({      
          ListBItems: returnedItems,
        });
      });

    }
  }

map()のfilter()内で_itemを使用すると、基本的なJavscriptロジックに少しがらくたになりますか?

Answers

Related