Question

前提条件：使用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>

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

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

1 个答案: