Что такое useState () и как он использовался для проверки входных значений?

Опубликовано: 7 Августа, 2021

UseState () - это ловушка в ReactJs, которая позволяет функциональному компоненту иметь состояние. Мы передаем начальное состояние в эту функцию, и она возвращает нам переменную и функцию для обновления этого состояния.

Нам нужно импортировать хук useState () из пакета реакции.
```
 импортировать {useState} из «реагировать»;
```
Синтаксис для создания состояния с помощью хука useState ():
```
 const [состояние, updateState] = useState («Начальное значение»)
```

UseState () возвращает список с двумя элементами. первая - это само состояние, а вторая - функция обновления этого состояния.

Создание приложения React:

Шаг 1. Создайте приложение React, используя следующую команду:

 npx создать-реагировать-приложение имя папки

Шаг 2: После создания папки проекта, то есть имени папки, перейдите в нее с помощью следующей команды:

 cd имя папки

Структура проекта: это будет выглядеть следующим образом.

Пример 1:
Имя файла App.js:

Javascript

 import React, { Component, useState } from "react" ;
 const App = () => {
   
  const [name, updateName] = useState( "kapil" )
 const handleUpdate = () => {
   
    updateName( "Nikhil" )
 }
    return (
    <div >
      <button
        style = { {margin: 100 }}
        onClick = { () => { handleUpdate()} } >
        change Name
      </button>
      { name }
    </div>
    );
           
}
 export App; default 

Выход:

Пример 2: Проверка входного значения в React позволяет отображать сообщение об ошибке, если пользователь не заполнил форму с ожидаемым значением. Есть много способов проверить входное значение с помощью React.

Имя файла App.js:

Javascript

 import React from 'react' ;
 
export default class App extends React.Component {
     
      state = {
        fields: {},
        errors: {}
    }
    //method to validate values
    handleValidation = ()=>{
      let fields = this .state.fields;
      let errors = {};
      let formIsValid = true ;
 
      //Name check if name is empty or not
      if (!fields[ "name" ]){
         formIsValid = false ;
         errors[ "name" ] = "Cannot be empty" ;
      }
        //name should not comtain special char
      if ( typeof fields[ "name" ] !== "undefined" ){
         if (!fields[ "name" ].match(/^[a-zA-Z]+$/)){
            formIsValid = false ;
            errors[ "name" ] = "Only letters" ;
         }
      }
  
      //Email should not be empty
      if (!fields[ "email" ]){
         formIsValid = false ;
         errors[ "email" ] = "Cannot be empty" ;
      }
        //validating email
      if ( typeof fields[ "email" ] !== "undefined" ){
         let lastAtPos = fields[ "email" ].lastIndexOf( '@' );
         let lastDotPos = fields[ "email" ].lastIndexOf( '.' );
 
         if (!(lastAtPos < lastDotPos && lastAtPos > 0
         && fields[ "email" ].indexOf( '@@' ) == -1 &&
         lastDotPos > 2 && (fields[ "email" ].length - lastDotPos) > 2)) {
            formIsValid = false ;
            errors[ "email" ] = "Email is not valid" ;
          }
     }
 
     this .setState({errors: errors});
     return formIsValid;
 }
 
    //after submit form it will be called
  handleSubmit = (e) =>{
  e.preventDefault();
    if ( this .handleValidation())
      alert( "form submitted successfully" )
  }
 
    //updating the field value
  handleUpdate(field, e){
    let fields = this .state.fields;
    fields[field] = e.target.value;
    this .setState({fields});
 }
 
 
  
    render(){
      return (
          <div style = {{margin:200}}>
             <form onSubmit= { this .handleSubmit.bind( this )}>
                 <input type= "text" placeholder= "Name"
                 onChange={ this .handleUpdate.bind( this , "name" )}
                 value={ this .state.fields[ "name" ]}/>
                    <span style={{color: "red" }}>
                    { this .state.errors[ "name" ]}</span>
                    <br/>
                 <input type= "text" placeholder= "Email"
                 onChange={ this .handleUpdate.bind( this , "email" )}
                 value={ this .state.fields[ "email" ]}/>
                    <span style={{color: "red" }}>
                    { this .state.errors[ "email" ]}</span>
                    <br/>
                 <button type = "submit" >click</button>
     
            </form>
          </div>
    )
  }
 }

Выход:

JavaScript Picked

Что такое useState () и как он использовался для проверки входных значений?

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ