Форум программистов, компьютерный форум, киберфорум
React/ReactJS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.93/40: Рейтинг темы: голосов - 40, средняя оценка - 4.93
1 / 1 / 0
Регистрация: 02.10.2018
Сообщений: 10

Отменить обновление страницы при выполнении метода

23.11.2019, 16:32. Показов 8187. Ответов 3

Студворк — интернет-сервис помощи студентам
У меня есть кнопка

JavaScript
1
2
3
4
<form onSubmit={this.props.weatherMethod}>
                <input type="text" name="city" placeholder="Город"/>
                    <button>Отобразить данные</button>
            </form>
И есть часть когда для weatherMethod:
Это в return:
JavaScript
1
<Form weatherMethod={this.gettingWeather()}/>
Это при объявлении класса:
JavaScript
1
2
3
4
5
6
gettingWeather = async (event) =>{
        event.preventDefault();
        const api_url = await fetch(`api.openweathermap.org/data/2.5/weather?q=Kiev&appid=${API_KEY}&units=metric`);
        const date = await api_url.json();
        console.log(date);
    }
При добавлении переменное e(event), приложение еще работает, но, когда обращаюсь к ней через
JavaScript
1
event.preventDefault();
вылезает ошибка в приложении
Unhandled Rejection (TypeError): Cannot read property 'preventDefault' of undefined

Подскажите в чем проблема? Или как иначе можно отменить обновление страницы, при нажатии на button
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
23.11.2019, 16:32
Ответы с готовыми решениями:

JSP вызов java метода и динамическое обновление страницы
Всем привет! Я в JavaEE новичок, столкнулся со следующей проблемой: Имеется JSP страничка, структура которой представлена в виде...

Как отменить обновление списка при добавлении записей
Нужно чтобы список (ListView) не мерцал при добавлении и удалении записей в него (и из него) при том что нужно чтобы DoEvents было. ...

Ошибка при выполнении метода PushBack
#include &quot;iostream&quot; #include &quot;string.h&quot; #include &lt;stdlib.h&gt; using namespace std; template &lt;typename T&gt; class MyVector { ...

3
1786 / 1036 / 445
Регистрация: 12.05.2016
Сообщений: 2,550
23.11.2019, 17:17
Лучший ответ Сообщение было отмечено Poteryan как решение

Решение

Цитата Сообщение от Poteryan Посмотреть сообщение
JavaScript
1
<Form weatherMethod={this.gettingWeather()}/>
Poteryan, Вы же ничего в gettingWeather не передаете.
Наверное, так должно быть
JavaScript
1
<Form weatherMethod={this.gettingWeather}/>
1
1 / 1 / 0
Регистрация: 02.10.2018
Сообщений: 10
23.11.2019, 17:24  [ТС]
Прикреплю два файла, участвующих тут
1
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from "react";
 
class Form extends React.Component{
    render(){
        return(
            <form onSubmit={this.props.weatherMethod}>
                <input type="text" name="city" placeholder="Город"/>
                    <button>Получить погоду</button>
            </form>
        );
    }
}
 
export default Form;

2
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React from "react";
import Info from "./components/info";
import Weather from "./components/Weather";
import Form from "./components/form";
 
const API_KEY = "KEY";
 
class App extends React.Component{
 
    gettingWeather = async (event) =>{
        event.preventDefault();
        const api_url = await fetch(`api.openweathermap.org/data/2.5/weather?q=Kiev&appid=${API_KEY}&units=metric`);
        const date = await api_url.json();
        console.log(date);
    }
 
    render() {
        return(
            <div>
            <Info />
            <Form weatherMethod={this.gettingWeather()}/>
            <Weather />
            </div>
        )
    }
 
}
 
export default App;
Метод срабатывает, т.к. на долю секунды я вижу как приходит нужная мне информация,(через консоль браузера) но тут же перезагружается страница.
0
1786 / 1036 / 445
Регистрация: 12.05.2016
Сообщений: 2,550
23.11.2019, 18:07
Лучший ответ Сообщение было отмечено Poteryan как решение

Решение

Poteryan,
Цитата Сообщение от shvyrevvg Посмотреть сообщение
Наверное, так должно быть
JavaScript
1
<Form weatherMethod={this.gettingWeather}/>
Добавлено через 51 секунду
Цитата Сообщение от Poteryan Посмотреть сообщение
Метод срабатывает, т.к. на долю секунды я вижу как приходит нужная мне информация,(через консоль браузера) но тут же перезагружается страница.
Метода тут нет.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
23.11.2019, 18:07
Помогаю со студенческими работами здесь

Ошибка при повторном выполнении метода
Подскажите пожалуйста. Ошибка при повторном выполнении метода.

Лаги при выполнении метода в потоке
Из библиотеки VkNet поставил в поток юзать метод Users.Search и добавлять каждую строку в metroTextBox, и после ~10к результатов начинаются...

Ошибка при выполнении GetAsync-метода
Удаленный сервер возвратил ошибку: NotFound, Контракт службы имеет два метода, различие между только в том, что второй метод извлекает...

FileNotFoundException и NullPointerException при выполнении метода
Я хочу проверить перевод на странице Я написал класс своей страницы и создал тестовый файл, в котором я тестирую свою страницу,...

Заполнение ProgressBar при выполнении метода
Здравствуйте! Возник такой вопрос. Существует два класса в одном распаковывается архив а в другом парсится XML. Из-за большого объема...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru