React Форми
Як і в HTML, React використовує форми, щоб дозволити користувачам взаємодіяти з вебсторінкою.
Додавання форм у React
Ви додаєте форму за допомогою React, як і будь-який інший елемент:
Приклад:
Add a form that allows users to enter their name:
function MyForm() {
return (
<form>
<label>Введіть ім’я:
<input type="text" />
</label>
</form>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);
Це працюватиме як зазвичай, форму буде надіслано, а сторінка оновиться.
Але загалом це не те, чого ми хочемо мати в React.
Ми хочемо запобігти такій поведінці за умовчанням і дозволити React контролювати форму.
Обробка форм
Обробка форм стосується того, як ви обробляєте дані, коли вони змінюють значення або надсилаються.
У HTML дані форми зазвичай обробляються DOM.
У React дані форми зазвичай обробляються компонентами.
Коли дані обробляються компонентами, усі дані зберігаються в стані компонента.
Ви можете контролювати зміни, додаючи обробники подій в атрибут onChange.
Ми можемо використовувати хук useState, щоб відстежувати кожне вхідне значення та надавати "єдине джерело правди" для всієї програми.
Перегляньте розділ Хуки React, щоб дізнатися більше про хуки.
Приклад:
Використовуйте хук useState для керування введенням:
import { useState } from 'react';
import ReactDOM from 'react-dom/client';
function MyForm() {
const [name, setName] = useState("");
return (
<form>
<label>Введіть ім’я:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
</form>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);
Надсилання форм
Ви можете керувати дією надсилання, додавши обробник події в атрибут onSubmit для <form>:
Приклад:
Додайте кнопку надсилання та обробник події в атрибут onSubmit:
import { useState } from 'react';
import ReactDOM from 'react-dom/client';
function MyForm() {
const [name, setName] = useState("");
const handleSubmit = (event) => {
event.preventDefault();
alert(`Ім’я, яке ви ввели, було: ${name}`)
}
return (
<form onSubmit={handleSubmit}>
<label>Введіть ім’я:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<input type="submit" />
</form>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);
Кілька полів введення
Ви можете керувати значеннями кількох полів введення, додавши атрибут name до кожного елемента.
Ми ініціалізуємо наш стан порожнім об’єктом.
Щоб отримати доступ до полів в обробнику подій, використовуйте event.target.name і event.target.value синтаксис.
Щоб оновити стан, використовуйте квадратні дужки [нотація] навколо імені властивості.
Приклад:
Напишіть форму з двома полями введення:
import { useState } from 'react';
import ReactDOM from 'react-dom/client';
function MyForm() {
const [inputs, setInputs] = useState({});
const handleChange = (event) => {
const name = event.target.name;
const value = event.target.value;
setInputs(values => ({...values, [name]: value}))
}
const handleSubmit = (event) => {
event.preventDefault();
alert(inputs);
}
return (
<form onSubmit={handleSubmit}>
<label>Введіть ім’я:
<input
type="text"
name="username"
value={inputs.username || ""}
onChange={handleChange}
/>
</label>
<label>Введіть свій вік:
<input
type="number"
name="age"
value={inputs.age || ""}
onChange={handleChange}
/>
</label>
<input type="submit" />
</form>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);Примітка: Ми використовуємо ту саму функцію обробника подій для обох полів введення, ми могли б написати один обробник подій для кожного, але це дає нам набагато чистіший код і є кращим способом у React.
Текстове поле / Textarea
Елемент textarea в React трохи відрізняється від звичайного HTML.
У HTML значенням текстового поля був текст між початковим тегом <textarea> і кінцевим тегом </textarea>.
<textarea>
Вміст текстового поля.
</textarea>У React значення текстового поля поміщається в атрибут value. Ми будемо використовувати хук useState для керування значенням текстового поля:
Приклад:
Просте текстове поле з деяким вмістом:
import { useState } from 'react';
import ReactDOM from 'react-dom/client';
function MyForm() {
const [textarea, setTextarea] = useState(
"Вміст текстового поля міститься в атрибуті value"
);
const handleChange = (event) => {
setTextarea(event.target.value)
}
return (
<form>
<textarea value={textarea} onChange={handleChange} />
</form>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);Вибрати
Спадний список або поле вибору в React також дещо відрізняється від HTML.
у HTML вибране значення в розкривному списку було визначено за допомогою атрибута selected:
HTML:
<select>
<option value="Ford">Ford</option>
<option value="Volvo" selected>Volvo</option>
<option value="Fiat">Fiat</option>
</select>У React вибране значення визначається атрибутом value у тегу select:
Приклад:
Просте поле вибору, де вибране значення "Volvo" ініціалізується в конструкторі:
function MyForm() {
const [myCar, setMyCar] = useState("Volvo");
const handleChange = (event) => {
setMyCar(event.target.value)
}
return (
<form>
<select value={myCar} onChange={handleChange}>
<option value="Ford">Ford</option>
<option value="Volvo">Volvo</option>
<option value="Fiat">Fiat</option>
</select>
</form>
)
}
Вносячи ці незначні зміни в <textarea> і <select>, React може обробляти всі введені елементи таким же чином.
