Quick Contact


    React Forms

    So here Inputs are taken to Forms using different tags like Select tag, Area tag, Input tag and data available for form submission. In Form such elements whose value is controlled by react is known as Controlled Component.

    Consider input element and it have a value which changed according to user interaction.

    < input type=”text” value=””>

    In controlled component value of input field is set to state property. Then there is “OnChange” event fired when there is a change in input field value. In OnChange Handler we use “setstate” to update the value. When state gets updated render method is called and new state is assigned some value to input element. So there is cycle of setting initial value of state propagating changed value to the state and then back to input field. React always have access to component state which reflect update value of Form elements that state object can be used to fetch data when needed. For more understanding there is a following code-:

    Create Form component and add events, fields, functions etc. accordingly-:

    		Import React, { Component } from ‘react’
    		Class Form extends Component {
    		  Constructor(props){
    		  Super(props)
    		 this.state – {
    		username: ‘’,
    		comments: ‘’
    		}
    		}
    		handleUsernameChange = event => {
    		this.setState ({
    		  username: event.target.value
    		})
    		}
    		handleCommentsChange = event => {
    		 this.setState({
    		   comments: event.target.value
    		  })
    		}
    		handleTopicChange = event => {
    		    this.setState({
    		   comments: event.target.value
    		})
    		}
    		handleSubmit = event => {
    		   alert(‘${this.state.username} ${this.state.comments} ${this.state.topic}’)
    		event.preventDefault()
    		}
    		Render() {
    		   Return (
    		    < form onSubmit={this.handleSubmit}>
    		    < div>
    		    < label>Username< /label>
    		     < input
    		          Type=”text”
    		           Value={this.state.username}
    		            onChange={this.handleUsernameChange}
    		             />
    		< /div>
    		< div>
    		   < label>Topic< /label>
    		   < select value= [this.state.topic] onChange= {this.handleTopicChange}>
    		< option value=”” > < /option>
    		< option value=”” > < /option>
    		< option value=”” > < /option>
    		< /select>
    		< /div>
    		< button type=”submit”> Submit < /button>
    		< /form>
    		}
    		}}
    		Export default form
    	
    react-forms

    Within Form tag give username and input field. First it can be written in simple HTML but to convert it into controlled react component and for this you need to follow 2 steps.

    First step is to create component state which takes the value of the input element. For this add the properties to “this.state” and also assign value to input element and when you see the browser input doesn’t reflect any changes.

    		Import react, {Component} from ‘react’
    		Class Form extends Component {
    		   Constructor(props) {
    		   Super(props)
    		This.state = {
    		   Username: ‘’
    		 }}
    		  Render() {
    		   Return (
    		< form>
    		< div>
    		< label>Username< /label>
    		< input type=”text”/ value={this.state.username}>
    		< /div>
    		< /form>
    	
    react-forms
    Now second step is handling onChange Event

    So in code put “onChange” function in input field and assign handler called handleUsernameChange and define method as a class property. From “event” parameter value of input element is extract, value is captured using event.target.value and all you have to do is assign the captured value to the state property and for which we use the state property as-:

    		Import react, {Component} from ‘react’
    		Class Form extends Component {
    		   Constructor (props) {
    		   Super (props)
    		This.state = {
    		   Username: ‘’
    		 }
    		}
    		handleUsernameChange = (event) => {
    		   this.setState ({
    		       username: event.target.value
    		})
    		}
    
    		  Render() {
    		   Return (
    		< form>
    		< div>
    		< label>Username< /label>
    		< input type=”text”/ value = {this.state.username}                
    		OnChange = {this.handleUsernameChange}
    		/>
    		< /div>
    		< /form>
    	

    Now with above code as using event.target.value you will be able to write in text area.

    Form elements naturally keep some internal state thats why form elements work a little bit different from other DOM elements in React. In HTML form elements like < input>, < text area> and < select> maintain own state and update it based on user input. Changeable state in React is typically kept in state property of components and updated with setState().

    There are two type of Components used-:

    1. Controlled Component

      Form has default Html form behaviour. If you want same default HTML behaviour in React then JavaScript functions are used that handles the submission of form and access the data of the form. Standard way to achieve this is with technique called controlled components. In this form data is handled by react component. Controlled component used in case of event handling.

    2. Uncontrolled Component

      In this data is handled by DOM itself. To use uncontrolled component there is no need to write event handler for every state updation, you can use ref to get form values from the DOM.

    Copyright 1999- Ducat Creative, All rights reserved.