reactjs - SPFx 在下拉列表中显示列表项（不在 Web 部件属性中）

Question

我对 SPFx 很陌生，并试图构建一个 Web 部件，在我的 Web 部件中，我会有一个下拉按钮，下拉值将来自 SharePoint 列表。我想使用 react 和 pnpjs。我如何实现它？

Answer 1

最后！有效。这是我的代码

import * as React from "react";
import styles from "./Spfxdropdowm.module.scss";
import { ISpfxdropdowmProps } from "./ISpfxdropdowmProps";
import { escape } from "@microsoft/sp-lodash-subset";
import pnp from "sp-pnp-js";
import { ClassCustomer } from "./ClassCustomer";
import { ISPListCustomerItem } from "./ICustomers";
import { taxonomy, ITerm, ITermSet, ITermStore } from "@pnp/sp-taxonomy";
import { IStackTokens, Stack } from "office-ui-fabric-react/lib/Stack";
import {
  Dropdown,
  DropdownMenuItemType,
  IDropdownStyles,
  IDropdownOption,
} from "office-ui-fabric-react/lib/Dropdown";

const dropdownStyles: Partial<IDropdownStyles> = {
  dropdown: { width: 300 },
};
const options: IDropdownOption[] = [
  { key: "apple", text: "Apple" },
  { key: "banana", text: "Banana" },
  { key: "orange", text: "Orange" },
  { key: "grape", text: "Grape" },
  { key: "broccoli", text: "Broccoli" },
  { key: "carrot", text: "Carrot" },
  { key: "lettuce", text: "Lettuce" },
];
const stackTokens: IStackTokens = { childrenGap: 20 };

var items: IDropdownOption[] = [];

export interface IReactGetItemsState {
  items: IDropdownOption[];
}

export default class GetlistitemsReact extends React.Component<
  ISpfxdropdowmProps,
  any
> {
  public constructor(props: ISpfxdropdowmProps, any) {
    super(props);
    this.state = {
      items: [],
    };
  }

  public async componentDidMount(): Promise<void> {
    // get all the items from a sharepoint list
    var reacthandler = this;
    pnp.sp.web.lists
      .getByTitle("Division")
      .items.select("Title")
      .get()
      .then(function (data) {
        for (var k in data) {
          items.push({ key: data[k].Title, text: data[k].Title });
        }
        reacthandler.setState({ items });
        console.log(items);
        return items;
      });
  }

  public render(): React.ReactElement<ISpfxdropdowmProps> {
    return (
      <Stack tokens={stackTokens}>
        <Dropdown
          placeholder="Select an option"
          label="Division"
          options={this.state.items}
          styles={dropdownStyles}
        />
      </Stack>
    );
  }
}

Answer 2

您可以在此视频中了解如何在 spfx 中检索项目：教程

我的测试代码：

import * as React from 'react';
import styles from './TaxonomyPopulator.module.scss';
import { ITaxonomyPopulatorProps } from './ITaxonomyPopulatorProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { taxonomy, ITerm, ITermSet, ITermStore } from '@pnp/sp-taxonomy';
import { ISPListCustomerItem } from './ICustomers';
import { ClassCustomer } from './ClassCustomer';
import pnp, { Web } from 'sp-pnp-js';

export default class TaxonomyPopulator extends React.Component<ITaxonomyPopulatorProps,any> {
  constructor(props:ITaxonomyPopulatorProps,any) {
    super(props);
    this.state = {
      titles:[]
    };
  }



  public render(): React.ReactElement<ITaxonomyPopulatorProps> {

    return (
      <div >
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
            <div className={ "ms-Grid" }>
            <div className={ "ms-Grid-row" }>
            <select>
             {

               this.state.titles.map((element) =>{                
               return <option>{element}</option>              
               })

            }

             </select>
            </div>
            </div>
            </div>
          </div>
        </div>
      </div>
    );
  }  
  public componentDidMount() {
    this._getListCustomerData();   
  }
  private _getListCustomerData():void
  {    
    var titles:Array<any> = [];
    let web = new Web(this.props.context.pageContext.web.absoluteUrl);
      web.lists.getByTitle('test2').items.get().then
      ((response)=>{
        let customerCollection=response.map(item=>{
          titles.push(item.Title);
        });       
        this.setState({titles});
      }

      )
  }
}

测试结果：

我在列表“test2”中显示所有标题列，您可以根据需要修改代码。