如何在结果卡中显示搜索结果的详细信息页面

Question

前提条件：使用 appbaseio/reactivesearch 的 React 应用程序

问题：当我点击搜索结果时，我尝试在同一窗口中打开一个简单的详情页面(例如，作为通过 onclick 处理程序触发的弹出窗口(。搜索结果由结果卡组件显示。有人有类似的问题并解决了它吗？

我看到 ResultCard 组件中有 url 参数(此处："配置文件"(，但它只是重定向到另一个选项卡窗口中的指定 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>

Answer 1

因此，

根据我从您的问题中了解到的内容，您希望在单击结果项时显示模态并显示所有详细信息。

如果是这种情况，您可以使用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>
     )
   }
/>

在此处查看文档：

对于 v3：https://opensource.appbase.io/reactive-manual/result-components/reactivelist.html

对于 v2：https://opensource.appbase.io/reactive-manual/v2/result-components/reactivelist.html