How to Use a Single Change Function to Store Multiple Office UI Textfield Values in SharePoint Framework (SPFx)

Introduction

In this blog, we will learn to use a single change function which holds multiple textfield values to its respective state variable in SharePoint Framework (SPFx)

The onchange event occurs when the value of an element has been changed.

Steps Involved

Below is the onchange function that is used for multiple textfield controls.

/*this is to capture the values of all text boxes and store in their respective state variables*/
private handleChange(e) {
let change = {};
change[e.target.name] = e.target.value;
this.setState(change);
}

Usage: Define the state variables in your ITestState.ts file as shown below

export interface ITestState{
CustomerAddress?: string;
CustomerContact?: string;
CustomerPhoneNo?: string;
CustomerEmail?: string;
}

Import your ITestState.ts file to your .tsx file

import { ITestState } from '../ITestState';

Initialize your state variable in your .tsx file under constructor.

this.state = {
CustomerAddress:' ',
CustomerContact:' ',
CustomerPhoneNo:' ',
CustomerEmail:' ',
}

Add the Office UI Fabric TextField controls to your .tsx file as shown below.

<TextField
multiline
label="Address :"
id="Address"
name="CustomerAddress"
autoAdjustHeight
value={this.state.CustomerAddress}
onChange={this.handleChange.bind(this)}
/>

Note - the "name" attribute in your TextField control should be same as the state variable declared.

For example: In the above control "CustomerAddress" is used as a values for the "name" attribute and also it is decalared as state variable.

This change event can be extended to all the controls which have a name attribute.

Similarly, you can use this for multiple controls as shown below:

Customer Contact

<TextField
label="Customer Contact :"
id="CustomerContact"
name="CustomerContact"
autoAdjustHeight
value={this.state.CustomerContact}
onChange={this.handleChange.bind(this)}
/>

Customer Phone No

<TextField
label="Phone Number :"
id="PhoneNumber"
name="CustomerPhoneNo"
autoAdjustHeight
value={this.state.CustomerPhoneNo}
onChange={this.handleChange.bind(this)}
/>

Customer Email

<TextField
label="Email Address :"
id="EmailAddress"
name="CustomerEmail"
autoAdjustHeight
value={this.state.CustomerEmail}
onChange={this.handleChange.bind(this)}
/>

You can furthur, extend the change event to perform other operations as per your requirements:

Extended onchange event,

private handleChange(e) {
let change = {};
change[e.target.name] = e.target.value;
this.setState(change);
/** to set default email to Email state variable */
if(e.target.name == "CustomerEmail"){
this.setState({CustomerEmail : "[email protected]"});
}
}

Please feel free to share your comments.

Hope this helps!