如何在ResultCard中实现onclick并将div与另一个组件交换

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (44)

我想显示用户在ResultCard中点击的详细信息。

我想在用户单击结果卡中的url时,根据弹性搜索簇(res)中的结果,用渲染的html替换divs内容(当前显示的结果)。

我尝试添加onclick属性但没有任何反应。Reactivesearch文档未列出此属性。

当然,我可以在ResultCard的url属性中传递参数并将用户重定向到另一个页面,但页面将完全重新加载(使用index.js和页脚中定义的菜单)

我认为创建父组件与状态镜像div中当前显示的子组件是要走的路。

但是,如何在用户点击结果卡时运行javascript来设置状态?


import React, { Component } from 'react';
import { ReactiveBase, CategorySearch, SingleRange, ResultCard } from '@appbaseio/reactivesearch';

class App extends Component {
  render() {
    return (
        <ReactiveBase
        app="artists"
        url="https://admin:xxxxxxx@node1.searchevolution.com:9200"
        type="_doc">
          <div style={{ display: "flex", "flexDirection": "row" }}>
            <div style={{ display: "flex", "flexDirection": "column", "width": "40%" }}>
              <CategorySearch
                componentId="searchbox"
                dataField="nom"
                categoryField="occupations.keyword"
                type="artists"
                placeholder="Search for Artists, Painter, Sculptor, Photographs"
                style={{
                  padding: "5px",
                  "marginTop": "10px"
                }}
              />

            </div>
            <ResultCard
              componentId="result"
              dataField="nom"
              title="Results"
              from={0}
              size={6}
              pagination={true}
              onclick="alert('Message à afficher');"
              react={{
                and: ["searchbox"]
              }}
              onData={(res) => {
                return {
                  image: "data:image/png;base64,iVBORw0KGgoA",
                  title: res.occupations,
                  description: res.nom,
                  url: "/details/" + res
                }
              }}
              style={{
                "width": "60%",
                "textAlign": "center"
              }}
            />
          </div>
        </ReactiveBase>
    );
  }
}

export default App;

预期的结果是使用从另一个组件(仍未编码)的渲染html更改div内容。

提问于
用户回答回答于

应该调用处理程序onClick而不是onclick(即使它看起来像HTML,这是JSX,因此处理程序需要是camelCase)。

此外,除非您将代码放入大括号(告诉JSX执行代码),否则您的代码不会调用alert。还有一件事:您希望将其包装在一个函数中,否则将在组件安装时调用警报,而不是在单击时调用。

onClick={() => alert('Message à afficher')}

扫码关注云+社区

领取腾讯云代金券