У React HTML-елементи форм працюють дещо інакше, ніж інші DOM-елементи, тому що елементи форм від початку мають певний внутрішній стан. Наприклад, в цю HTML-форму можна ввести ім’я:
\n<form>\n <label>\n Ім'я:\n <input type=\"text\" name=\"name\" />\n </label>\n <input type=\"submit\" value=\"Надіслати\" />\n</form>За замовчуванням браузер переходить на іншу сторінку при відправленні HTML-форм, в тому числі і цієї. Якщо вас це влаштовує, то не потрібно нічого змінювати, в React форми працюють як зазвичай. Однак найчастіше форму зручніше обробляти за допомогою JavaScript-функції, у якої є доступ до введених даних. Стандартний спосіб реалізації такої поведінки називається “керовані компоненти”.
\nВ HTML елементи форми, такі як <input>, <textarea> і <select>, зазвичай самі керують своїм станом і оновлюють його коли користувач вводить дані. У React змінний стан зазвичай міститься у властивості стану компонентів і оновлюється тільки через виклик setState()
Ми можемо скомбінувати обидва підходи і зробити стан React-компоненту “єдиним джерелом правди”. Тоді React-компонент, який буде рендерити форму, також буде контролювати її поведінку у відповідь на введення даних користувача. Значення елемента форми в цьому випадку буде контролювати React, а сам елемент буде називатися “керованим компонентом”.
\nНаприклад, якщо ми хочемо, щоб у прикладі вище після відправлення форми передані дані виводилися у консолі, то ми можемо переписати форму як “керований компонент”:
\nclass NameForm extends React.Component {\n constructor(props) {\n super(props);\n this.state = {value: ''};\n this.handleChange = this.handleChange.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n handleChange(event) { this.setState({value: event.target.value}); }\n handleSubmit(event) {\n alert('Ім\\'я, що було надіслано: ' + this.state.value);\n event.preventDefault();\n }\n\n render() {\n return (\n <form onSubmit={this.handleSubmit}>\n <label>\n Ім'я:\n <input type=\"text\" value={this.state.value} onChange={this.handleChange} /> </label>\n <input type=\"submit\" value=\"Надіслати\" />\n </form>\n );\n }\n}Оскільки ми встановили атрибут value для нашого елементу форми, відображене значення завжди буде this.state.value, що робить стан React “джерелом правди”. Оскільки handleChange працює при кожному натисканні клавіші для оновлення стану React, відображуване значення оновиться разом з вводом користувача.
У керованому компоненті значення поля введення завжди визначається станом React. Хоча це і означає, що ви повинні написати трохи більше коду, але тепер ви зможете передавати значення й іншим UI-елементам або скинути його з інших обробників подій.
\nHTML-елемент <textarea> визначає текстові дані безпосередньо як текст, введений між відкриваючим та закриваючим тегами:
<textarea>\n Привіт, це текст у текстовій області\n</textarea>Натомість в React <textarea> використовує атрибут value. Таким чином, форма, яка використовує <textarea>, може бути написана дуже схоже до форми, яка використовує однорядковий ввід:
class EssayForm extends React.Component {\n constructor(props) {\n super(props);\n this.state = { value: 'Будь ласка, напишіть твір про ваш улюблений елемент DOM.' };\n this.handleChange = this.handleChange.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n handleChange(event) { this.setState({value: event.target.value}); }\n handleSubmit(event) {\n alert('Твір, що було надіслано: ' + this.state.value);\n event.preventDefault();\n }\n\n render() {\n return (\n <form onSubmit={this.handleSubmit}>\n <label>\n Essay:\n <textarea value={this.state.value} onChange={this.handleChange} /> </label>\n <input type=\"submit\" value=\"Надіслати\" />\n </form>\n );\n }\n}Зверніть увагу на те, що this.state.value ініціалізується в конструкторі, так що область тексту з самого початку має певний текст.
В HTML елемент <select> створює список, який можна відкрити. Наприклад, цей HTML створює список ароматів:
<select>\n <option value=\"grapefruit\">Грейпфрут</option>\n <option value=\"lime\">Лайм</option>\n <option selected value=\"coconut\">Кокос</option>\n <option value=\"mango\">Манго</option>\n</select>Зверніть увагу на те, що опція “Кокос” обрана за замовчуванням за допомогою атрибуту selected. Замість того, щоб використовувати атрибут selected, React використовує атрибут value кореневого тегу select. У керованому компоненті так зручніше, тому що потрібно оновити його лише в одному місці. Наприклад:
class FlavorForm extends React.Component {\n constructor(props) {\n super(props);\n this.state = {value: 'кокос'};\n this.handleChange = this.handleChange.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n handleChange(event) { this.setState({value: event.target.value}); }\n handleSubmit(event) {\n alert('Ваш улюблений аромат: ' + this.state.value);\n event.preventDefault();\n }\n\n render() {\n return (\n <form onSubmit={this.handleSubmit}>\n <label>\n Оберіть ваш улюблений аромат:\n <select value={this.state.value} onChange={this.handleChange}> <option value=\"грейпфрут\">Грейпфрут</option>\n <option value=\"лайм\">Лайм</option>\n <option value=\"кокос\">Кокос</option>\n <option value=\"манго\">Манго</option>\n </select>\n </label>\n <input type=\"submit\" value=\"Надіслати\" />\n </form>\n );\n }\n}Загалом, все зроблено таким чином, що <input type="text">, <textarea> і <select> працюють дуже подібно — всі вони приймають атрибут value, який можна використовувати для реалізації керованого компоненту.
\n\nПримітка
\nВи можете передати масив у атрибут
\nvalue, що дозволяє вибрати декілька параметрів у тезіselect:\n<select multiple={true} value={['B', 'C']}>
В HTML, <input type="file"> дозволяє користувачеві вибрати один або кілька файлів зі сховища його пристрою, які будуть завантажені на сервер або маніпулювати ними за допомогою JavaScript через File API.
<input type=\"file\" />Оскільки його значення доступне лише для читання, це некерований компонент у React. Це обговорюється разом з іншими некерованими компонентами пізніше в документації.
\nКоли вам потрібно обробляти декілька керованих елементів input, ви можете додати атрибут name до кожного елемента і дозволити функції-обробнику вибрати, що робити спираючись на значення event.target.name.
Наприклад:
\nclass Reservation extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n isGoing: true,\n numberOfGuests: 2\n };\n\n this.handleInputChange = this.handleInputChange.bind(this);\n }\n\n handleInputChange(event) {\n const target = event.target;\n const value = target.type === 'checkbox' ? target.checked : target.value;\n const name = target.name;\n this.setState({\n [name]: value });\n }\n\n render() {\n return (\n <form>\n <label>\n Триває:\n <input\n name=\"isGoing\" type=\"checkbox\"\n checked={this.state.isGoing}\n onChange={this.handleInputChange} />\n </label>\n <br />\n <label>\n Кількість гостей:\n <input\n name=\"numberOfGuests\" type=\"number\"\n value={this.state.numberOfGuests}\n onChange={this.handleInputChange} />\n </label>\n </form>\n );\n }\n}Зверніть увагу на те, як ми використали ES6-синтаксис для розрахованих імен властивостей, щоб оновити стан за ключами, які співпадають зі значенням атрибуту name відповідних полів введення:
this.setState({\n [name]: value});Це те ж саме, що й такий ES5-код:
\nvar partialState = {};\npartialState[name] = value;this.setState(partialState);Крім того, оскільки setState() автоматично об’єднує частковий стан у поточний стан, нам потрібно було лише викликати його зі зміненими частинами.
Встановлення значення пропсу value в керованому компоненті не дозволяє користувачеві змінювати введені дані, якщо ви цього не бажаєте. Якщо ви вказали value, але вхідні дані все ще можна редагувати, можливо, ви випадково встановили значення для value як undefined або null.
Наступний код демонструє це. (Поле вводу спочатку заблоковане, але стає доступним для редагування після невеликої затримки.)
\nReactDOM.render(<input value=\"привіт\" />, mountNode);\n\nsetTimeout(function() {\n ReactDOM.render(<input value={null} />, mountNode);\n}, 1000);Іноді використання керованих компонентів може бути досить важким заняттям, оскільки вам потрібно написати обробник подій для кожного випадку, коли ваші дані можуть бути змінені і провести весь стан форми через компонент React. Це може стати особливо дратівливим, коли ви перетворюєте вже наявну кодову базу в React або інтегруєте програму React з бібліотекою, що не є реактивною. У таких ситуаціях можна спробувати некеровані компоненти як альтернативну техніку для обробки даних форм.
\nЯкщо ви шукаєте комплексне рішення, включаючи перевірку, відстеження відвідуваних полів та обробку відправлення даних форми, то бібліотека Formik є одним з популярних варіантів. Однак вона теж побудована на тих же принципах, що і керовані компоненти та керування станом — тож не нехтуйте їх вивченням.
","frontmatter":{"title":"Форми","next":"lifting-state-up.html","prev":"lists-and-keys.html"},"fields":{"path":"content/docs/forms.md","slug":"docs/forms.html"}}},"pageContext":{"slug":"docs/forms.html"}},"staticQueryHashes":[]}