Создание формы
Создадим форму для получения данных от пользователя. В компоненте Form используем следующий HTML-код:
<form>
<input type="text" name="city" placeholder="Город" />
<button>Получить погоду</button>
</form><input> — текстовое поле для ввода названия города. Атрибут name="city" необходим для получения данных с помощью JavaScript и React. <button> — кнопка для получения данных о погоде. Обратите внимание на корректное закрытие тегов.
Работа с URL-адресом
Для упрощения, в URL-адресе будем передавать только название города, исключая код страны.
Передача свойств в компонент
Для обработки нажатия кнопки, передадим функцию в компонент Form через свойства:
<Form getWeather={this.getWeather} />Метод getWeather передаётся как свойство getWeather. В компоненте Form к нему можно обратиться как к this.props.getWeather.
Обработка события нажатия кнопки
В компоненте Form используем обработчик событий onSubmit для вызова переданного метода:
<form onSubmit={(e) => {
e.preventDefault();
this.props.getWeather();
}}>
{/* ... */}
</form>e.preventDefault() предотвращает стандартное поведение браузера (обновление страницы) при отправке формы.
Получение данных из формы
Получим значение из поля с атрибутом name="city":
const city = e.target.elements.city.value;Переменная city содержит введённое название города. Выведем её значение в консоль:
console.log({ name: city });Мы создали форму, научились передавать свойства в компонент и обрабатывать события. В последующих уроках добавим вывод данных о погоде на страницу.