Как отобразить страницу с выбранной строкой по индексу? - PullRequest
Новая
       35

Как отобразить страницу с выбранной строкой по индексу?

0 голосов
/ 20 сентября 2019

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

В состоянии моего компонента есть свойство selectedIndex, которое содержит индекс массива выбранного в данный момент элемента.

Мне удалось обработатьсобытия щелчка как в строке реагирующей таблицы, так и в объекте интерактивной карты, и установите соответствующее значение для свойства selectedIndex.Мне удалось выделить как строку, отображающую выбранный элемент, так и объект, представляющий выбранный элемент на карте. 

getTrProps={(s: any, rowInfo: RowInfo) => {
  if (rowInfo == null) {
    return {};
  }
  return {
    onClick: (e: any, handleOriginal: any) => {
      this.handleSelectedIndexPress(rowInfo.index);
      if (handleOriginal) {
        handleOriginal();
      }
    },
    style: rowInfo.index === this.state.selectedIndex ?
      {background: '#00AFEC', color: 'white'} : {}
  }
}

<GlifyPointsLayer
  data={state.reportPoints}
  click={(e, point: [number, number, number]) => this.handleSelectedIndexPress(point[2])}
  color={{r: 1, g: 0, b: 1}}
  size={10}
/>
{state.selectedIndex != null &&
<Marker
  position={state.reportPoints[state.selectedIndex] as any}
  icon={markerIcon}
/>

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

Когда это произойдет, я бы хотел перейти на страницу, где находится выбранный элемент.

Я знаю, что в компоненте ReactTable есть свойство page, с помощью которого я могу программно управлять отображаемой в данный момент страницей.Проблема в том, что когда я обрабатываю событие click на интерактивной карте, у меня есть доступ только к индексу выбранного элемента. 

handleSelectedIndexPress = (index: number) => {
    // Here i need to figure out the page number that the row with index "index" is in.
    const selectedIndex = index !== this.state.selectedIndex ? index : null;
    this.setState({selectedIndex: selectedIndex});
};

Как определить, какой номер страницы находится в этом индексе, чтобы я могможно правильно настроить отображаемую страницу?Имейте в виду, что строки таблицы реакции могут сортироваться различными способами, поэтому индекс не связан математически с номером страницы.

...