Как отобразить подробную страницу из результатов поиска в ResultCard? - PullRequest
Новая
       15

Как отобразить подробную страницу из результатов поиска в ResultCard?

0 голосов
/ 18 июня 2019

Предварительные условия: Реагируйте на приложение, используя appbaseio / реактивный поиск

Проблема: Я пытаюсь открыть простую страницу сведений в том же окне (например, как всплывающее окно )срабатывает через обработчик onclick ), когда я нажимаю на результат поиска.Результаты поиска отображаются компонентом ResultCard.Кто-нибудь имел подобную проблему и решил ее?

Я вижу, что есть параметр url (здесь: "профиль") в компоненте ResultCard, но он просто перенаправляет на указанный URL-адрес в другом окне вкладки. 

import {ReactiveBase, DataSearch, ResultCard} from 
appbaseio/reactivesearch";

// ...some more code

<div className="container">
// connector to appbase.io
<ReactiveBase
  app="myapp"
  credentials="xxx"
  theme={{
    primaryColor: "#ffe067"
  }}
>
// search bar
<DataSearch
    componentId="SearchSensor"
    dataField={["gebot_name", "info"]}
    className="search"
/>
// display search results in a list with title and description
<ResultCard
    className="right-col"
    componentId="SearchResult"
    size={10}
    onData={data => ({
      title: data.gebot_name,
      description: data.description,
      url: "profile"
    })}
    react={{
      and: ["SearchSensor"]
    }}
/>
</ReactiveBase>
</div>

1 Ответ

1 голос
/ 20 июня 2019

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

В этом случае вы можете использовать ReactiveList и визуализировать данные в соответствии с вашим выбором. Например:

В v2: 

<ReactiveList
   ...
   onData={ res => (
        <div onClick={() => this.handleModal(res)} >{Content}</div>
     )
   }
/>

С помощью this.handleModal вы можете работать с модалом и отображать данные.

В v3

<ReactiveList
   ...
   renderItem={ res => (
        <div onClick={() => this.handleModal(res)} >{Content}</div>
     )
   }
/>

Проверьте документацию здесь:

Для версии 3: https://opensource.appbase.io/reactive-manual/result-components/reactivelist.html

Для версии 2: https://opensource.appbase.io/reactive-manual/v2/result-components/reactivelist.html

...