Вступ до форм у реакт

Оскільки ми знаємо, що форми є важливою частиною веб-додатку, тому необхідно мати знання про розробку форм в реагуванні. У цій статті ми побачимо, які існують різні типи форм, доступні в реакції, їх синтаксис та кілька прикладів, пов'язаних з формами реагування.

Ось основний синтаксис форм реагування,

Синтаксис:

class FormClassName extends React.Component (
constructor(props) (
super(props);
// handle initialization activities
)
handleChangeEvents(event) (
//handle change events
)
handleSubmitevents(event) (
// handle submit events
)
render() (
return (

Name:


);
)
)

Наведений вище синтаксис показує, як створена форма для реакції. Це вимагатиме створення класу, що розширює React. Метод компонента та візуалізації матиме в ньому тег форми. Як ми бачимо, візуалізація містить тег форми, всередині якого у нас є мітка для відображення тексту, а потім тег типу введення, подібний до HTML. Тут ми вказали події надсилання та зміни подій відповідно на кнопку та текст відповідно.

Типи форм у реакт

В основному в реакції є два типи форм. Вони є,

1. Керований вхід

Форма реакції вважається контрольованою, коли компонент реагування, який відповідає за візуалізацію, також контролює поведінку форми на наступних введеннях. Це означає, що коли значення інформують про зміни, компонент зберігає змінене значення у своєму стані. Давайте подивимось приклад,

Код:

import React, ( Component ) from 'react';
class ControlledForm extends Component (
constructor () (
this.state = (
username: ''
)
)
changeEventHandler = event => (
this.setState((
username: event.target.value
));
)
render () (
return (
name="username"
value=(this.state.username)
onChange=(this.changeEventHandler)
/>
);
)
)
export default ControlledForm;

У наведеному вище прикладі кожен раз, коли змінюється значення імені користувача, викликається обробник події зміни і його оновлене значення зберігається у стані. Тому контрольована форма може використовуватися для застосування перевірок, відключення кнопки, поки текстове поле не містить деякий текст тощо.

2. Безконтрольні форми

Некеровані форми схожі на форми HTML. Це не використовує жодного слухача. Це потрібно для отримання значення поля в необхідний час, наприклад, натискання кнопки. Необхідне значення зчитується за допомогою посилання, пов'язаного з елементами форми. Ось як визначається посилання,

Код:



"Valueref", що використовується вище, використовується для зчитування значення поля типу,

this.refs.valueref.value

З наведеної дискусії ми маємо чітке розуміння контрольованих та неконтрольованих форм реагування.

Приклади форм у реакт

Нижче згадуються деякі приклади

Приклад №1

Для початку ми використаємо просте текстове поле у ​​нашій формі. Ось код із текстовим полем для введення імені користувача.

Код:

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
render() (
return (
Hello

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
render() (
return (
Hello

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
render() (
return (
Hello

Будь ласка, введіть своє Ім'я користувача:

type = "текст"
/>
);
)
)
ReactDOM.render (, document.getElementById ('root'));

Вихід:

Приклад №2

Тепер ми розглянемо ще один приклад, який показує, як текстове поле використовується кнопкою подання та як обробляти події, пов’язані з натисканням кнопки. У наведеному нижче коді є:

Код:

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
constructor(props) (
super(props);
this.state = ( username: '' );
)
submitmyeventHandler = (myevent) => (
alert("You are submitting " + this.state.username);
)
changeEventHandler = (myevent) => (
this.setState((username: myevent.target.value));
)
render() (
return (
Hello (this.state.username)

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
constructor(props) (
super(props);
this.state = ( username: '' );
)
submitmyeventHandler = (myevent) => (
alert("You are submitting " + this.state.username);
)
changeEventHandler = (myevent) => (
this.setState((username: myevent.target.value));
)
render() (
return (
Hello (this.state.username)

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
constructor(props) (
super(props);
this.state = ( username: '' );
)
submitmyeventHandler = (myevent) => (
alert("You are submitting " + this.state.username);
)
changeEventHandler = (myevent) => (
this.setState((username: myevent.target.value));
)
render() (
return (
Hello (this.state.username)

Будь ласка, введіть своє ім’я користувача та натисніть надіслати:


type = 'текст'
onChange = (this.changeEventHandler)
/>
type = 'подати'
/>
);
)
)
ReactDOM.render (, document.getElementById ('root'));

Вихід:

Коли введено ім’я користувача, слухачі будуть спрацьовувати, і заголовок зміниться динамічно.

Після натискання кнопки "Надіслати" подія подання буде запущена, і буде показано попередження, як приєднане нижче,

Приклад №3

У цьому прикладі ми побачимо, як у формі використовується кілька полів. Тут ми маємо два поля для введення firstName та lastName. Ми використовували обробник подій змін, щоб динамічно змінювати вміст тексту зі зміною відповідних значень.

Код:

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
constructor(props) (
super(props);
this.state = (
firstName: '',
lastName: null,
);
)
changeEventHandler = (event) => (
let nam = event.target.name;
let val = event.target.value;
this.setState(((nam): val));
)
render() (
return (
Welcome (this.state.firstName) (this.state.lastName)

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
constructor(props) (
super(props);
this.state = (
firstName: '',
lastName: null,
);
)
changeEventHandler = (event) => (
let nam = event.target.name;
let val = event.target.value;
this.setState(((nam): val));
)
render() (
return (
Welcome (this.state.firstName) (this.state.lastName)

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
constructor(props) (
super(props);
this.state = (
firstName: '',
lastName: null,
);
)
changeEventHandler = (event) => (
let nam = event.target.name;
let val = event.target.value;
this.setState(((nam): val));
)
render() (
return (
Welcome (this.state.firstName) (this.state.lastName)

Введіть ім'я:


type = 'текст'
name = 'firstName'
onChange = (this.changeEventHandler)
/>

Введіть прізвище:

type = 'текст'
name = 'lastName'
onChange = (this.changeEventHandler)
/>
);
)
)
ReactDOM.render (, document.getElementById ('root'));

На вкладеному нижче висновку показано два текстових поля для введення імені та прізвища. Зі зміною змісту імені та прізвища змінюється вищезазначений заголовок.

Вихід:

Висновок

У вищезгаданій дискусії ми маємо чітке розуміння форм реагування. Окрім наведених вище прикладів, ми можемо надати більше налаштувань форм відповідно до наших потреб. Форма є важливим компонентом реагування і призначена для багаторазового використання.

Рекомендовані статті

Це посібник до Форми в Реакт. Тут ми обговорюємо введення та типи форм реагування разом із його прикладами та реалізацією коду. Ви також можете переглянути наступні статті, щоб дізнатися більше -

  1. Різниця між ReactJS та Angular2
  2. Топ-5 найкращих рамок Javascript
  3. Питання для інтерв'ю WinForms (основні, розширені)
  4. React Native vs React
  5. Посібник з різних подій JavaScript

Категорія:

Розробка програмного забезпечення