Jak pracować z elementami formularzy w React
Praca z formularzami i elementami formularzy podczas programowania w React może być skomplikowana, ponieważ elementy formularzy HTML zachowują się nieco inaczej w React niż inne elementy DOM.
Dowiedz się, jak pracować z formularzami i elementami formularzy, takimi jak pola wyboru, obszary tekstowe i jednowierszowe wprowadzanie tekstu.
Zarządzanie polami wejściowymi w formularzach
W React zarządzanie polem wejściowym w formularzu często polega na stworzeniu stanu i powiązaniu go z polem wejściowym.
Na przykład:
function App() {
const [firstName, setFirstName] = React.useState('');
function handleFirstNameChange(event) {
setFirstName(event.target.value)
}
return (
<form>
<input type='text' placeholder='First Name' onInput={handleFirstNameChange} />
</form>
)
}
Powyżej mamy stan firstName , zdarzenie onInput i handler handleChange . Funkcja handleChange jest uruchamiana przy każdym naciśnięciu klawisza, aby zaktualizować stan firstName .
Takie podejście może być idealne podczas pracy z jednym polem wejściowym, ale tworzenie różnych stanów i funkcji obsługi dla każdego elementu wejściowego stałoby się powtarzalne podczas pracy z wieloma polami wejściowymi.
Aby uniknąć pisania powtarzalnego i nadmiarowego kodu w takich sytuacjach, nadaj każdemu polu wejściowemu odrębną nazwę, ustaw obiekt jako wartość stanu początkowego formularza, a następnie wypełnij obiekt właściwościami o takich samych nazwach jak pola wejściowe.
Na przykład:
function App() {
const [formData, setFormData] = React.useState(
{
firstName: '',
lastName: ''
}
);
return (
<form>
<input type='text' placeholder='First Name' name='firstName' />
<input type='text' placeholder='Last Name' name='lastName' />
</form>
)
}
FormData będzie służyć jako zmienna stanu do zarządzania i aktualizowania wszystkich pól wejściowych w formularzu. Upewnij się, że nazwy właściwości w obiekcie stanu są identyczne z nazwami elementów wejściowych.
Aby zaktualizować stan za pomocą danych wejściowych, dodaj detektor zdarzeń onInput do elementu wejściowego, a następnie wywołaj utworzoną funkcję obsługi.
Na przykład:
function App() {
const [formData, setFormData] = React.useState(
{
firstName: '',
lastName: ''
}
);
function handleChange(event) {
setFormData((prevState) => {
return {
...prevState,
[event.target.name]: event.target.value
}
})
}
return (
<form>
<input
type='text'
placeholder='First Name'
name='firstName'
onInput={handleChange}
/>
<input
type='text'
placeholder='Last Name'
name='lastName'
onInput={handleChange}
/>
</form>
)
}
Powyższy blok kodu wykorzystywał zdarzenie onInput i funkcję obsługi handleFirstNameChange . Ta funkcja handleFirstNameChange zaktualizuje właściwości stanu po wywołaniu. Wartości właściwości stanu będą takie same, jak odpowiadające im elementy wejściowe.
Konwertowanie danych wejściowych na kontrolowane komponenty
Po przesłaniu formularza HTML jego domyślnym zachowaniem jest przejście do nowej strony w przeglądarce. Takie zachowanie jest niewygodne w niektórych sytuacjach, na przykład gdy chcesz sprawdzić poprawność danych wprowadzonych do formularza. W większości przypadków bardziej odpowiednie będzie dla Ciebie posiadanie funkcji JavaScript z dostępem do informacji wprowadzonych w formularzu. Można to łatwo osiągnąć w React przy użyciu kontrolowanych komponentów.
W plikach index.html elementy formularzy śledzą swój stan i modyfikują go w odpowiedzi na dane wejściowe użytkownika. W React funkcja set state modyfikuje stan dynamiczny przechowywany we właściwości state komponentu. Możesz połączyć te dwa stany, czyniąc stan React jedynym źródłem prawdy. W ten sposób komponent tworzący formularz kontroluje, co się dzieje, gdy użytkownik wprowadza dane. Elementy formularzy wejściowych z wartościami, które kontroluje React, nazywane są kontrolowanymi komponentami lub kontrolowanymi danymi wejściowymi.
Aby korzystać z kontrolowanych danych wejściowych w aplikacji React, dodaj wartość do elementu wejściowego:
function App() {
const [formData, setFormData] = React.useState(
{
firstName: '',
lastName: ''
}
);
function handleChange(event) {
setFormData((prevState) => {
return {
...prevState,
[event.target.name]: event.target.value
}
})
}
return (
<form>
<input
type='text'
placeholder='First Name'
name='firstName'
onInput={handleChange}
value={formData.firstName}
/>
<input
type='text'
placeholder='Last Name'
name='lastName'
onInput={handleChange}
value={formData.lastName}
/>
</form>
)
}
Atrybuty wartości elementów wejściowych są teraz ustawione jako wartości odpowiednich właściwości stanu. Wartość wejścia jest zawsze określana przez stan, gdy używany jest kontrolowany komponent.
Obsługa elementu wejściowego Textarea
Element textarea jest jak każdy zwykły element wejściowy , ale zawiera wielowierszowe dane wejściowe. Jest to przydatne przy przekazywaniu informacji, które wymagają więcej niż jednego wiersza.
W pliku index.html element znacznika textarea określa swoją wartość na podstawie swoich elementów podrzędnych, jak widać na poniższym bloku kodu:
<textarea>
Hello, How are you?
</textarea>
W React, aby użyć elementu textarea , możesz utworzyć element input z typem textarea .
jak tak:
function App() {
return (
<form>
<input type='textarea' name='message'/>
</form>
)
}
Alternatywą dla używania textarea jako typu wejściowego jest użycie znacznika elementu textarea zamiast znacznika typu wejściowego, jak pokazano poniżej:
function App() {
return (
<form>
<textarea
name='message'
value='Hello, How are you?'
/>
</form>
)
}
Znacznik textarea ma atrybut value, który przechowuje informacje o użytkowniku wprowadzone w elemencie textarea . Dzięki temu działa jak domyślny element wejściowy React.
Praca z elementem wejściowym Checkbox w React
Sprawy mają się trochę inaczej podczas pracy z polami wyboru . Pole wejściowe pola wyboru typu nie ma atrybutu wartości. Ma jednak sprawdzony atrybut. Ten zaznaczony atrybut różni się od atrybutu value tym, że wymaga podania wartości logicznej w celu określenia, czy pole jest zaznaczone, czy nie.
Na przykład:
function App() {
return (
<form>
<input type='checkbox' id='joining' name='join' />
<label htmlFor='joining'>Will you like to join our team?</label>
</form>
)
}
Element label odwołuje się do identyfikatora elementu wejściowego za pomocą atrybutu htmlFor . Ten atrybut htmlFor przyjmuje identyfikator elementu wejściowego — w tym przypadku łączenia. Podczas tworzenia formularza HTML atrybut htmlFor reprezentuje atrybut for .
Pole wyboru jest lepiej używane jako kontrolowane wejście. Możesz to osiągnąć, tworząc stan i przypisując mu początkową wartość logiczną true lub false.
Powinieneś zawrzeć dwa rekwizyty w elemencie wejściowym pola wyboru : właściwość check i zdarzenie onChange z funkcją obsługi, która określi wartość stanu za pomocą funkcji setIsChecked() .
Na przykład:
function App() {
const [isChecked, setIsChecked] = React.useState(false);
function handleChange() {
setIsChecked((prevState) =>! prevState)
}
return (
<form>
<input
type='checkbox'
id='joining'
name='join'
checked={isChecked}
onChange={handleChange}
/>
<label htmlFor='joining'>Will you like to join our team?</label>
</form>
)
}
Ten blok kodu generuje stan isChecked i ustawia jego wartość początkową na false . Ustawia wartość isChecked na sprawdzony atrybut w elemencie wejściowym. Funkcja handleChange uruchomi się i zmieni wartość stanu isChecked na przeciwną za każdym razem, gdy klikniesz pole wyboru.
Element formularza może prawdopodobnie zawierać wiele elementów wejściowych różnych typów, takich jak pola wyboru, tekst itp.
W takich przypadkach możesz obsłużyć je w podobny sposób, jak obsługiwałeś wiele elementów wejściowych tego samego typu.
Oto przykład:
function App() {
let[formData, setFormData] = React.useState(
{
firstName: ''
join: true,
}
);
function handleChange(event) {
const {name, value, type, checked} = event.target;
setFormData((prevState) => {
return {
...prevState,
[name]: type === checkbox? checked: value
}
})
}
return (
<form>
<input
type='text'
placeholder='First Name'
name='firstName'
onInput={handleChange}
value={formData.firstName}
/>
<input
type='checkbox'
id='joining'
name='join'
checked={formData.join}
onChange={handleChange}
/>
<label htmlFor='joining'>Will you like to join our team?</label>
</form>
)
}
Zauważ, że w funkcji handleChange setFormData używa operatora trójargumentowego do przypisania wartości sprawdzonej właściwości do właściwości stanu, jeśli docelowym typem danych wejściowych jest pole wyboru . Jeśli nie, przypisuje wartości atrybutu value .
Teraz możesz obsługiwać formularze React
Nauczyłeś się, jak pracować z formularzami w React, używając różnych elementów wejściowych formularza tutaj. Nauczyłeś się również, jak stosować kontrolowane dane wejściowe do elementów formularza, dodając rekwizyt wartości lub sprawdzony rekwizyt podczas pracy z polami wyboru.
Wydajna obsługa elementów wejściowych formularzy React poprawi wydajność aplikacji React, zapewniając lepsze wrażenia użytkownika.
Dodaj komentarz