Функции обратного вызова между React Native Pages - PullRequest
Новая
       1

Функции обратного вызова между React Native Pages

0 голосов
/ 07 октября 2018

Я пытаюсь получить переменную с одной страницы в React Native и передать ее на другую.Я попытался сделать это с помощью функций обратного вызова между двумя страницами.

Я импортирую страницы друг в друга: import MapFilters from "./MapFilters.js";

Как получить выбранную переменную из MapFilters в LucyChat?

Цель:

Выбранный представляет диапазон мили, который я хотел бы использовать в запросе, чтобы определить, какой диапазон маркеров отображать на карте.

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

LucyChat отображает карту с запросом для отображения маркеров.

Пример: var queryString = 'SELECT Id из маркеров, где Marker.Location <' + mapFilterRange; </p>

LucyChat: 

export default class LucyChat extends React.Component {

  passBackSelectedVar(selectedVar) {
    this.state = {
    mapFilterRange: selectedVar,  
    };

  }

    constructor(props) {

      MapFilters.getSelectedVar();

        super(props);
        this.state = {
            data: [],
            isMapReady: false,
            latitude: null,
            longitude: null,
            error: null,
            coords:[],    
            mapFilterRange: null,
        };


    }

MapFilters: 

export default class MapFilters extends React.Component {



    constructor(props) {
        super(props);

        this.state = {
          selected: '50'
        };
      }
      onValueChange(value: string) {
        this.setState({
          selected: value
        });
      }

      getSelectedVar() {
        LucyChat.passBackSelectedVar(this.state.selected);
      };

1 Ответ

0 голосов
/ 07 октября 2018

Я думаю, вам следует пересмотреть структуру вашего компонента и получить что-то вроде этого: 

Range Selector (filters which user can change)
|-- Map Preview
|-- LucyChat ( Not sure what this component does )

Селектором диапазона будет пользовательский интерфейс, в котором пользователь будет выбирать диапазон, который также будет передаваться другим двум компонентам черезреквизит.Таким образом, они будут повторно визуализировать на основе этого изменения параметра.

...