Estoy viendo un curso de Pluralsight .
En el trabajo, uso React with Sharepoint Online. Tengo una página que representa un componente, por ejemplo, etiquetas, cuadros de texto, selector de personas y no tengo un comando document.getElementbyID. ¿Funciona Sharepoint en línea de manera diferente al campo de juegos Pluralsight? Jscomplete.com Aquí está mi código. He eliminado la información confidencial de la empresa. El código funciona Solo quiero entender por qué no he tenido que usar document.getElementbyID.

```
import * as React from 'react';
import styles from './FinanceAccReq.module.scss';
import { IFinanceAccReqProps } from './IFinanceAccReqProps';
import { IFinanceAccReqState } from './IFinanceAccReqState';
import {IComboBoxTogglesExampleState}from './IComboBoxTogglesExampleState';

// @pnp/sp imports  
import { sp } from '@pnp/sp';  
import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/PeoplePicker";
import { getGUID } from "@pnp/common";

import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; 
import { autobind } from 'office-ui-fabric-react'; 
import { Label } from 'office-ui-fabric-react/lib/Label';
import { TextField,MaskedTextField  } from 'office-ui-fabric-react/lib/TextField';

import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
import { Stack, IStackTokens } from 'office-ui-fabric-react/lib/Stack';
import { getId } from 'office-ui-fabric-react/lib/Utilities';
import { WebPartContext } from '@microsoft/sp-webpart-base';
import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';

import { bool } from 'prop-types';
//import { IOfficeFabricProps } from '../IOfficeFabricProps';
import { DetailsList, DetailsListLayoutMode, Selection, IColumn } from 'office-ui-fabric- 
  react/lib/DetailsList';
import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
import { ComboBox, Fabric, IComboBoxOption, mergeStyles,IComboBoxProps, 
SelectableOptionMenuItemType,PrimaryButton} from 'office-ui-fabric-react/lib/index';
import {SPData} from './SPData';
import { TagPicker, IBasePicker, ITag } from 'office-ui-fabric-react/lib/Pickers';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';

const rootClass = mergeStyles({
  maxWidth: 500
});

export default class financeAccReq extends React.Component{amp}lt;IFinanceAccReqProps, 
IFinanceAccReqState,IComboBoxTogglesExampleState{amp}gt; {  
private INITIAL_OPTIONS: ITag[] = [];
private _picker = React.createRef{amp}lt;IBasePicker{amp}lt;ITag{amp}gt;{amp}gt;();
constructor(props: IFinanceAccReqProps, state: IFinanceAccReqState) {
super(props);
//super();
this.handleFirstName = this.handleFirstName.bind(this);
this.handleSurName = this.handleSurName.bind(this);

this.handleWindowsID = this.handleWindowsID.bind(this);
this.handleEmail = this.handleEmail.bind(this);
this.handleCostCentreCode=this.handleCostCentreCode.bind(this);
this.handleTeamName=this.handleTeamName.bind(this);
//this._onCheckboxChange = this._onCheckboxChange.bind(this);
this._system1=this._system1.bind(this);
this.system2=this._system2.bind(this);


this.state = {
  addUsers: [],
  firstName: "",
  surName: "",
  windowsID:"",
  costCentreCode:"",
  email:"",
  teamName:"",
  titleError:"",
  firstNameError: "",
  surNameError: "",
  windowsIDError:"",
  costCentreCodeError:"",
  lineManagerError:"",
  emailError:"",
  selectedItems: [],
  dpselectedItem: undefined,
  dpselectedCostCentre:undefined,
  dpisystem1:undefined,
  dpisystem2:false,
  costCentreList:[],
  INITIAL_OPTIONS: [],
  confirmationMessage: ""
 };

}




public componentDidMount(){ 

this.INITIAL_OPTIONS = [];
sp.web.lists.getByTitle("CostCentres").items.getAll().then((result: any)={amp}gt;{
  for(let i: number = 0; i{amp}lt; result.length; i  ) {
    const b: SPData = result[i];
    //const c: IComboBoxOption={key:b.Column1, text: b.CostCentreInfo};
    const c: ITag={key:b.Column1, name: b.CostCentreInfo};
    this.INITIAL_OPTIONS.push(c);
}

});
}

public render(): React.ReactElement{amp}lt;IFinanceAccReqProps{amp}gt; 

{
//const { dpselectedItem, dpselectedItems } = this.state;
const { dpselectedItem } = this.state;
const { dpselectedCostCentre} = this.state;
//const { dynamicErrorValue} = this.state;
const { System1Approver } = this.state;
const stackTokens: IStackTokens = { childrenGap: 1 };
const { system1,system2} = this.state;
const { firstName, surName } = this.state;
const maskFormat: { [key: string]: RegExp } = {'*': /[0-9]/};



   const wrapperClassName = mergeStyles({
    display: 'flex',
    selectors: {
    '{amp}amp; {amp}gt; *': { marginRight: '20px' },
    '{amp}amp; .ms-ComboBox': { maxWidth: '300px' }
    }
    });



return (
  {amp}lt;div className={ styles.financeAccReq }{amp}gt;
    {amp}lt;div className={ styles.container }{amp}gt;
      {amp}lt;div className={ styles.row }{amp}gt;
        {amp}lt;div className={ styles.column }{amp}gt;
          {/* {amp}lt;span className={ styles.title }{amp}gt;Welcome to SharePoint!{amp}lt;/span{amp}gt; */}
          {amp}lt;p className={ styles.subTitle }{amp}gt;This form should be completed by the new user’s line manager.  You will be e-mailed to confirm the user has been set up as requested.{amp}lt;/p{amp}gt;
          {amp}lt;p className={ styles.subTitle }{amp}gt;If you have any questions regarding this form please contact your Finance Business Partner.{amp}lt;/p{amp}gt;
          {amp}lt;p className={ styles.subTitle }{amp}gt;It can take up to 5 working days to complete the setup process, failure to complete mandatory fields may result in a further delay.{amp}lt;/p{amp}gt;
          {amp}lt;div className="ms-Grid-col ms-u-m4 block"{amp}gt;
          {/* {amp}lt;div className="errorMessage"{amp}gt;
              {amp}lt;TextField defaultValue=""  errorMessage={this.state.confirmationMessage} /{amp}gt;
           {amp}lt;/div{amp}gt; */}

            {amp}lt;label className="ms-Label"{amp}gt;Title{amp}lt;/label{amp}gt;
          {amp}lt;/div{amp}gt;
          {amp}lt;div className="ms-Grid-col ms-u-m8 block"{amp}gt;

            {amp}lt;Dropdown
              //placeHolder="Select an Option"
              //label="Title"
              id="component"
              selectedKey={dpselectedItem ? dpselectedItem.key : undefined}
              //ariaLabel="Title"
              options={[
                { key: 'Please select', text: 'Please select' },
                { key: 'Mr', text: 'Mr' },
                { key: 'Mrs', text: 'Mrs' },
                { key: 'Ms', text: 'Ms' },
                { key: 'Dr', text: 'Dr' }
              ]}
              errorMessage={this.state.titleError}
              onChanged={this._changeTitleState}
              onFocus={this._log('onFocus called')}
              onBlur={this._log('onBlur called')}
            /{amp}gt;
            {amp}lt;/div{amp}gt;
          {amp}lt;div className="ms-Grid-col ms-u-m4 block"{amp}gt;
            {amp}lt;label className="ms-Label"{amp}gt;First Name *{amp}lt;/label{amp}gt;
          {amp}lt;/div{amp}gt;
          {amp}lt;div className="ms-Grid-col ms-u-m8 block"{amp}gt;
            {amp}lt;TextField value={this.state.firstName}  onChanged={this.handleFirstName} errorMessage={this.state.firstNameError}/{amp}gt;
          {amp}lt;/div{amp}gt;
          {amp}lt;div className="ms-Grid-col ms-u-m4 block"{amp}gt;
            {amp}lt;label className="ms-Label"{amp}gt;Surname *{amp}lt;/label{amp}gt;
          {amp}lt;/div{amp}gt;
          {amp}lt;div className="ms-Grid-col ms-u-m8 block"{amp}gt;
            {amp}lt;TextField value={this.state.surName} onChanged={this.handleSurName} errorMessage={this.state.surNameError}/{amp}gt;
          {amp}lt;/div{amp}gt;

           {amp}lt;div className="ms-Grid-col ms-u-m4 block"{amp}gt;
              {amp}lt;label className="ms-Label"{amp}gt;Windows id is the user id you use to log on to your PC/Laptop e.g. smitha{amp}lt;/label{amp}gt;
              {amp}lt;p{amp}gt;{amp}lt;/p{amp}gt;
              {amp}lt;label className="ms-Label"{amp}gt;Windows ID * {amp}lt;/label{amp}gt;
           {amp}lt;/div{amp}gt;
           {amp}lt;div className="ms-Grid-col ms-u-lg block"{amp}gt;
              {amp}lt;TextField value={this.state.windowsID} onChanged={this.handleWindowsID}  errorMessage={this.state.windowsIDError} /{amp}gt;

           {amp}lt;/div{amp}gt;
           {amp}lt;div className="ms-Grid-col ms-u-m4 block"{amp}gt;
              {amp}lt;label className="ms-Label"{amp}gt;Cost Centre Code *{amp}lt;/label{amp}gt;
           {amp}lt;/div{amp}gt;


           {amp}lt;div className="ms-Grid-col ms-u-m4 block"{amp}gt;               
           {amp}lt;TagPicker
          componentRef={this._picker}
      onResolveSuggestions={this._onFilterChangedNoFilter}
      onItemSelected={this._onItemSelected}
      getTextFromItem={this._getTextFromItem}
      pickerSuggestionsProps={{
        suggestionsHeaderText: 'Suggested Tags',
        noResultsFoundText: 'No Color Tags Found'
      }}
      itemLimit={1}
      disabled={false}
      inputProps={{
        onBlur: (ev: React.FocusEvent{amp}lt;HTMLInputElement{amp}gt;) ={amp}gt; console.log('onBlur called'),
        onFocus: (ev: React.FocusEvent{amp}lt;HTMLInputElement{amp}gt;) ={amp}gt; console.log('onFocus called'),
        'aria-label': 'Tag Picker'
      }}
    /{amp}gt;

      {amp}lt;/div{amp}gt;




           {amp}lt;div className="ms-Grid-col ms-u-m4 block"{amp}gt;
              {amp}lt;label className="ms-Label"{amp}gt;Email *{amp}lt;/label{amp}gt;
           {amp}lt;/div{amp}gt;
           {amp}lt;div className="errorMessage"{amp}gt;
              {amp}lt;TextField defaultValue="@xxx.org.uk" value={this.state.email} onChanged={this.handleEmail}  errorMessage={this.state.emailError} /{amp}gt;
           {amp}lt;/div{amp}gt;
          {amp}lt;div className="ms-Grid-col ms-u-m4 block"{amp}gt;
            {amp}lt;label className="ms-Label"{amp}gt;Line Manager *{amp}lt;/label{amp}gt;{amp}lt;br /{amp}gt;
          {amp}lt;/div{amp}gt;

            {amp}lt;PeoplePicker
            context={this.props.context}
            titleText=""
            personSelectionLimit={1}
            groupName={""} // Leave this blank in case you want to filter from all users
            showtooltip={true}
            isRequired={true}
            disabled={false}
            ensureUser={true}
            selectedItems={this._getPeoplePickerItems}
            showHiddenInUI={false}
            principalTypes={[PrincipalType.User,PrincipalType.SharePointGroup]}
            errorMessageClassName="ms-Grid-col ms-u-m8 block"
            errorMessage={this.state.lineManagerError}
            resolveDelay={1000} /{amp}gt; 


           {amp}lt;div className="ms-Grid-col ms-u-m4 block"{amp}gt;
              {amp}lt;label className="ms-Label"{amp}gt;Team Name (for users of ...){amp}lt;/label{amp}gt;
           {amp}lt;/div{amp}gt;
           {amp}lt;div className="errorMessage"{amp}gt;
              {amp}lt;TextField  value={this.state.teamName} onChanged={this.handleTeamName}   /{amp}gt;
           {amp}lt;/div{amp}gt;
            {amp}lt;Stack tokens={stackTokens}{amp}gt;
                {amp}lt;Toggle  inlineLabel onText="Access Required" offText=" Access Not Required"  onChange= {this._changeSystem1UserState} /{amp}gt;
                {amp}lt;Toggle  inlineLabel onText="Approval Required" offText="Approval Not Required"  onChange= {this._changeSystem2ApproverState} /{amp}gt;
            {amp}lt;/Stack{amp}gt;



            {amp}lt;DefaultButton 
              color="blue"
              className="button"
              data-automation-id="addSelectedUsers"  
              title="Submit"//Add Selected User"  
              onClick={this.addSelectedUsers}{amp}gt;  

              Submit 
            {amp}lt;/DefaultButton{amp}gt;  

        {amp}lt;/div{amp}gt;
      {amp}lt;/div{amp}gt;
    {amp}lt;/div{amp}gt;
  {amp}lt;/div{amp}gt;
);
}


```