Using React with Sharepoint Online Part 1 - reactjs

Question

I'm watching a Pluralsight course.
At work, I am using React with Sharepoint Online. I have a page which renders a component eg labels, textboxes, people picker and don't have a command document.getElementbyID. Does Sharepoint online work differently to the Pluralsight course playground jscomplete.com
Here is my code. I've removed company sensitive information.
The code works. I just want to understand why I've not had to use 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<IFinanceAccReqProps,
IFinanceAccReqState,IComboBoxTogglesExampleState> {
private INITIAL_OPTIONS: ITag[] = [];
private _picker = React.createRef<IBasePicker<ITag>>();
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)=>{
for(let i: number = 0; i< 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<IFinanceAccReqProps>
{
//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: {
'& > *': { marginRight: '20px' },
'& .ms-ComboBox': { maxWidth: '300px' }
}
});
return (
<div className={ styles.financeAccReq }>
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>
{/* <span className={ styles.title }>Welcome to SharePoint!</span> */}
<p className={ styles.subTitle }>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.</p>
<p className={ styles.subTitle }>If you have any questions regarding this form please contact your Finance Business Partner.</p>
<p className={ styles.subTitle }>It can take up to 5 working days to complete the setup process, failure to complete mandatory fields may result in a further delay.</p>
<div className="ms-Grid-col ms-u-m4 block">
{/* <div className="errorMessage">
<TextField defaultValue="" errorMessage={this.state.confirmationMessage} />
</div> */}
<label className="ms-Label">Title</label>
</div>
<div className="ms-Grid-col ms-u-m8 block">
<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')}
/>
</div>
<div className="ms-Grid-col ms-u-m4 block">
<label className="ms-Label">First Name *</label>
</div>
<div className="ms-Grid-col ms-u-m8 block">
<TextField value={this.state.firstName} onChanged={this.handleFirstName} errorMessage={this.state.firstNameError}/>
</div>
<div className="ms-Grid-col ms-u-m4 block">
<label className="ms-Label">Surname *</label>
</div>
<div className="ms-Grid-col ms-u-m8 block">
<TextField value={this.state.surName} onChanged={this.handleSurName} errorMessage={this.state.surNameError}/>
</div>
<div className="ms-Grid-col ms-u-m4 block">
<label className="ms-Label">Windows id is the user id you use to log on to your PC/Laptop e.g. smitha</label>
<p></p>
<label className="ms-Label">Windows ID * </label>
</div>
<div className="ms-Grid-col ms-u-lg block">
<TextField value={this.state.windowsID} onChanged={this.handleWindowsID} errorMessage={this.state.windowsIDError} />
</div>
<div className="ms-Grid-col ms-u-m4 block">
<label className="ms-Label">Cost Centre Code *</label>
</div>
<div className="ms-Grid-col ms-u-m4 block">
<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<HTMLInputElement>) => console.log('onBlur called'),
onFocus: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onFocus called'),
'aria-label': 'Tag Picker'
}}
/>
</div>
<div className="ms-Grid-col ms-u-m4 block">
<label className="ms-Label">Email *</label>
</div>
<div className="errorMessage">
<TextField defaultValue="#xxx.org.uk" value={this.state.email} onChanged={this.handleEmail} errorMessage={this.state.emailError} />
</div>
<div className="ms-Grid-col ms-u-m4 block">
<label className="ms-Label">Line Manager *</label><br />
</div>
<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} />
<div className="ms-Grid-col ms-u-m4 block">
<label className="ms-Label">Team Name (for users of ...)</label>
</div>
<div className="errorMessage">
<TextField value={this.state.teamName} onChanged={this.handleTeamName} />
</div>
<Stack tokens={stackTokens}>
<Toggle inlineLabel onText="Access Required" offText=" Access Not Required" onChange= {this._changeSystem1UserState} />
<Toggle inlineLabel onText="Approval Required" offText="Approval Not Required" onChange= {this._changeSystem2ApproverState} />
</Stack>
<DefaultButton
color="blue"
className="button"
data-automation-id="addSelectedUsers"
title="Submit"//Add Selected User"
onClick={this.addSelectedUsers}>
Submit
</DefaultButton>
</div>
</div>
</div>
</div>
);
}
```

Answer 1

In your code, we don't need use document.getElementById to get the DOM elements.
If you want to use it, we can add some code in the componentDidMount() method in react SPFx web part.
Example:
public render(): React.ReactElement<IFinanceAccReqProps> {
return (
<div className={ styles.financeAccReq }>
<div className={ styles.container }>
<div className={ styles.row }>
<input type="button" className={styles.button} value="Mytest" id="btnSubmit"/>
</div>
</div>
</div>
);
}
public componentDidMount(){
let btnTest=document.getElementById("btnSubmit") as HTMLInputElement;
alert(btnTest.value);
}
More example solutions about SPFx web part for your reference.
SharePoint Framework Client-Side Web Part Samples & Tutorial Materials