Введение в формы в действии

Поскольку мы знаем, что формы являются важной частью веб-приложения, поэтому необходимо иметь знания о разработке форм в реагировании. В этой статье мы увидим, какие формы различного типа доступны в реагируют, их синтаксис и несколько примеров, связанных с формами реагирования.

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

Синтаксис:

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

Пожалуйста, введите имя пользователя:

тип = «текст»
/>
);
)
)
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)

Пожалуйста, введите ваше имя пользователя и нажмите «Отправить»:


тип = «Текст»
OnChange = (this.changeEventHandler)
/>
тип = «Отправить»
/>
);
)
)
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)

Введите имя:


тип = «Текст»
Name = 'Имя'
OnChange = (this.changeEventHandler)
/>

Введите фамилию:

тип = «Текст»
Name = 'LastName'
OnChange = (this.changeEventHandler)
/>
);
)
)
ReactDOM.render (, document.getElementById ('root'));

Нижеприведенный вывод показывает два текстовых поля для ввода имени и фамилии. При изменении содержания имени и фамилии размещенный выше заголовок изменяется.

Выход:

Вывод

В приведенном выше обсуждении у нас есть четкое понимание форм реагирования. Помимо приведенных выше примеров, мы можем предоставить больше настроек для форм в соответствии с нашими потребностями. Форма является важным компонентом реакции и предназначена для многократного использования.

Рекомендуемые статьи

Это руководство по формам в действии. Здесь мы обсуждаем введение и типы форм в реагировании вместе с его примерами и реализацией кода. Вы также можете посмотреть следующие статьи, чтобы узнать больше

  1. Разница между ReactJS и Angular2
  2. Топ 5 лучших фреймворков Javascript
  3. WinForms Interview Questions (Basic, Advanced)
  4. Реагировать родной против реагировать
  5. Руководство по различным событиям JavaScript

Категория:

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