Я пытаюсь создать приложение, которое поможет мне научиться реагировать.Это простое приложение, которое принимает пользовательское местоположение ввода, получает координаты из googles geolocation api, а затем получает погодные условия для этого местоположения с помощью dark skys api.
У меня изначально была вся логика приложения в одном контейнере, который вы можетесм. здесь https://github.com/darragh3277/night-sky
Я хочу немного больше отделить свою логику, поскольку я чувствовал, что мой единственный контейнер делает слишком много вещей.Я пытаюсь структурировать свое приложение следующим образом.
App.js - содержит состояние, функцию locationChangeHandler для передачи в LocationSearchContainer.
LocationSearchContainer - API геолокации и вызывает LocationSearch для отображения панели поиска
WeatherContainer - WeatherAPI и вызывает компонент Weather для визуализации дисплея.
Я считаю, что это дает мне лучшее разделение проблем и делает мой код немного более читабельным.
Из-заэта структура, я думаю, мне нужен locationChangeHandler в моем App.js, который будет передан моему компоненту Dump LocationSearch.Это тесно связывает мои App.js с панелью поиска, но так как это основная функция приложения, я не верю, что это проблема.
С чем я столкнулся, так это с тем, как передать свой обработчик из приложения.js -> LocationSearchContainer -> LocationSearch.Вот моя неудачная попытка:
В App.js у меня есть
handleLocationChange = e => {
e.preventDefault();
console.log('hello');
//Calls getLocation in LocationSearchContainer and updates state
}
render(){
return (
<LocationSearchContainer onLocationChange={this.handleLocationChange} />
)
}
В LocationSearchContainer у меня есть следующее:
import React from 'react';
import LocationSearch from '../components/LocationSearch';
class LocationSearchContainer extends React.Component{
getLocation = (address) => {
//DO STUFF
}
render(){
return (
<LocationSearch onLocationChange={this.props.handleLocationChange} />
)
}
}
export default LocationSearchContainer;
И, наконец, LocationSearch:
import React from 'react';
const LocationSearch = (
<form onSubmit={props.onLocationChange}>
<div className="input-group">
<input type="text" name="location" className="form-control" placeholder="Search location..." />
<button className="btn btn-primary">Go!</button>
</div>
</form>
)
export default LocationSearch;
Как правильно передать этот обработчик?
После того, как у меня работает вышеуказанное, мне также нужно вызвать getLocation в моем SearchLocationContainer из App.js, но я неВы уверены, как это сделать?
РЕДАКТИРОВАТЬ
Я выяснил, часть первая моей проблемы.Я вызывал функцию по имени, а не по имени пропуска, которое я передавал.Поэтому в функции render () моего LocationSearchContainer у меня должен был быть
return (
<LocationSearch onLocationChange={this.props.handleLocationChange} />
)
, а не мой оригинал.
Это все еще оставляет мне проблему с вызовом функции getCoordinates моего LocationSearchContainer из моего приложенияфайл .jsКто-нибудь сможет мне помочь с этим?