Wprowadzenie do formularzy w reakcji

Ponieważ wiemy, że formularze są ważną częścią aplikacji internetowej, dlatego niezbędna jest wiedza na temat projektowania formularzy. W tym artykule zobaczymy, jakie są różne typy formularzy dostępne w React, ich składnia i kilka przykładów związanych z formami React.

Oto podstawowa składnia form reagowania,

Składnia:

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:


);
)
)

Powyższa składnia pokazuje, jak formularz jest tworzony w celu zareagowania. Będzie to wymagało utworzenia klasy rozszerzającej React. Metoda komponentu i metody renderowania będzie zawierać znacznik formularza. Jak widzimy, render zawiera znacznik formularza, w którym mamy etykietę pokazującą tekst, po której następuje tag typu wejściowego podobny do HTML. Tutaj określamy przesyłanie zdarzeń i zmienianie zdarzeń odpowiednio dla przycisku i tekstu.

Rodzaje formularzy w reakcji

Zasadniczo reagują dwa rodzaje form. Oni są,

1. Kontrolowane wejście

Forma reakcji jest uważana za kontrolowaną, gdy komponent reakcji odpowiedzialny za renderowanie kontroluje również zachowanie formularza na kolejnych danych wejściowych. Oznacza to, że ilekroć wartości informują o zmianach, komponent zapisuje zmienioną wartość do swojego stanu. Zobaczmy przykład

Kod:

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;

W powyższym przykładzie za każdym razem, gdy zmienia się wartość nazwy użytkownika, wywoływany jest moduł obsługi zdarzenia zmiany, a jego zaktualizowana wartość jest zapisywana w stanie. Dlatego kontrolowanej formy można użyć do zastosowania sprawdzania poprawności, wyłączając przycisk, dopóki pole tekstowe nie będzie zawierało tekstu itp.

2. Niekontrolowane formularze

Niekontrolowane formularze są podobne do formularzy HTML. To nie korzysta z żadnego odbiornika. Wymagało to uzyskania wartości pola w wymaganym czasie, na przykład po kliknięciu przycisku. Wymagana wartość jest odczytywana za pomocą odwołania powiązanego z elementami formularza. Tak definiuje się odniesienie,

Kod:



„Wartość” użyte powyżej służy do odczytu wartości pola, np.

this.refs.valueref.value

Z powyższej dyskusji jasno rozumiemy kontrolowane i niekontrolowane formy reagowania.

Przykłady formularzy w reakcji

Poniżej wymieniono kilka przykładów

Przykład 1

Aby rozpocząć, użyjemy prostego pola tekstowego w naszym formularzu. Oto kod pokazujący pole tekstowe do wprowadzenia nazwy użytkownika.

Kod:

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

Proszę, wpisz swoją nazwę użytkownika:

type = "text"
/>
);
)
)
ReactDOM.render (, document.getElementById ('root'));

Wynik:

Przykład nr 2

Teraz omówimy inny przykład pokazujący, jak pole tekstowe jest używane z przyciskiem wysyłania i jak obsługiwać zdarzenia związane z kliknięciem przycisku. Poniższy kod ma,

Kod:

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)

Wprowadź swoją nazwę użytkownika i kliknij Prześlij:


type = „text”
onChange = (this.changeEventHandler)
/>
typ = „prześlij”
/>
);
)
)
ReactDOM.render (, document.getElementById ('root'));

Wynik:

Po wprowadzeniu nazwy użytkownika nasłuchiwania zostaną uruchomione, a nagłówek zmieni się dynamicznie.

Po kliknięciu przycisku Prześlij zostanie uruchomione zdarzenie Prześlij i zostanie wyświetlone ostrzeżenie, takie jak załączone poniżej,

Przykład nr 3

W tym przykładzie zobaczymy, jak wiele pól jest używanych w formularzu. Tutaj mamy dwa pola do wprowadzenia firstName i lastName. Użyliśmy modułu obsługi zdarzeń zmiany w celu dynamicznej zmiany zawartości tekstu wraz ze zmianą ich odpowiednich wartości.

Kod:

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)

Wprowadź imię:


type = „text”
name = „firstName”
onChange = (this.changeEventHandler)
/>

Wpisz nazwisko:

type = „text”
name = 'lastName'
onChange = (this.changeEventHandler)
/>
);
)
)
ReactDOM.render (, document.getElementById ('root'));

Załączone poniżej dane wyjściowe pokazują dwa pola tekstowe do wprowadzenia imienia i nazwiska. Wraz ze zmianą treści imienia i nazwiska powyższy nagłówek ulega zmianie.

Wynik:

Wniosek

W powyższej dyskusji doskonale rozumiemy formy reakcji. Oprócz powyższych przykładów możemy zapewnić więcej dostosowań formularzy zgodnie z naszymi potrzebami. Forma jest ważnym składnikiem reakcji i ma być przeznaczona do wielokrotnego użytku.

Polecane artykuły

To jest przewodnik po formularzach w React. W tym miejscu omawiamy wprowadzenie i typy reagujących formularzy wraz z ich przykładami i implementacją kodu. Możesz także przejrzeć następujące artykuły, aby dowiedzieć się więcej-

  1. Różnica między ReactJS a Angular2
  2. Top 5 najlepszych ram JavaScript
  3. Pytania do wywiadu WinForms (podstawowe, zaawansowane)
  4. React Native vs React
  5. Przewodnik po różnych zdarzeniach JavaScript

Kategoria:

Rozwój oprogramowania