时间戳

首页 > 解决方案 > 如何在 ResultCard 中显示搜索结果中的详细信息页面？

reactjs - 如何在 ResultCard 中显示搜索结果中的详细信息页面？

问题描述

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

问题：当我单击搜索结果时，我试图在同一窗口中打开一个简单的详细信息页面（例如，作为通过onclick处理程序触发的弹出窗口）。ResultCard 组件正在显示搜索结果。有人遇到过类似的问题并解决了吗？

我看到 ResultCard 组件中有 url 参数（此处为：“profile”），但它只是重定向到另一个选项卡窗口中的指定 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>

标签： reactjsreactivesearch

解决方案

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

如果是这种情况，您可以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

推荐阅读