Post
Ask Question

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. 
  1. /*this is to capture the values of all text boxes and store in their respective state variables*/  
  2.     private handleChange(e) {  
  3.         let change = {};  
  4.         change[e.target.name] = e.target.value;  
  5.         this.setState(change);  
  6.     }  
Usage: Define the state variables in your ITestState.ts file as shown below 
  1. export interface ITestState{  
  2.     CustomerAddress?: string;  
  3.     CustomerContact?: string;  
  4.     CustomerPhoneNo?: string;  
  5.     CustomerEmail?: string;  
  6.  }  
Import your ITestState.ts file to your .tsx file  
  1. import { ITestState } from '../ITestState';  
Initialize your state variable in your .tsx file under constructor. 
  1. this.state = {  
  2.           CustomerAddress:' ',  
  3.           CustomerContact:' ',  
  4.           CustomerPhoneNo:' ',  
  5.           CustomerEmail:' ',  
  6. }  
 Add the Office UI Fabric TextField controls to your .tsx file as shown below. 
  1. <TextField  
  2.       multiline  
  3.       label="Address :"  
  4.       id="Address"  
  5.       name="CustomerAddress"  
  6.       autoAdjustHeight  
  7.       value={this.state.CustomerAddress}  
  8.       onChange={this.handleChange.bind(this)}  
  9.   />  
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
  1. <TextField  
  2.       label="Customer Contact :"  
  3.       id="CustomerContact"  
  4.       name="CustomerContact"  
  5.       autoAdjustHeight  
  6.       value={this.state.CustomerContact}  
  7.       onChange={this.handleChange.bind(this)}  
  8.   />  
Customer Phone No
  1. <TextField  
  2.       label="Phone Number :"  
  3.       id="PhoneNumber"  
  4.       name="CustomerPhoneNo"  
  5.       autoAdjustHeight  
  6.       value={this.state.CustomerPhoneNo}  
  7.       onChange={this.handleChange.bind(this)}  
  8.   />  
Customer Email
  1. <TextField  
  2.       label="Email Address :"  
  3.       id="EmailAddress"  
  4.       name="CustomerEmail"  
  5.       autoAdjustHeight  
  6.       value={this.state.CustomerEmail}  
  7.       onChange={this.handleChange.bind(this)}  
  8.   />  
You can furthur, extend the change event to perform other operations as per your requirements:
 
Extended onchange event, 
  1. private handleChange(e) {  
  2.         let change = {};  
  3.         change[e.target.name] = e.target.value;  
  4.         this.setState(change);  
  5.   
  6.         /** to set default email to Email state variable */  
  7.         if(e.target.name == "CustomerEmail"){  
  8.             this.setState({CustomerEmail : "[email protected]"});  
  9.         }            
  10. }  
 
 
Please feel free to share your comments.
 
Hope this helps!