如何在ResultCard中实现onclick并将div与其他组件互换
我想要显示ResultCard中用户点击内容的详细信息。
当用户单击结果卡中的url时，我想根据在我的elastic search cluster(res)中找到的结果，用呈现的html替换div内容(当前显示的结果)。
我尝试添加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内容(仍未编码)。
回答 2
Stack Overflow用户
发布于 2019-05-28 07:35:38
处理程序应该被称为onClick，而不是onclick (尽管它看起来像HTML，但这是JSX，所以处理程序需要是camelCase)。
此外，您的代码不会调用alert，除非您将其放在大括号中(这会告诉JSX执行代码)。还有一件事:您希望将其封装在一个函数中，否则将在组件挂载时调用警报，而不是在单击时调用。
onClick={() => alert('Message à afficher')}编辑:我想我误解了你的问题。如果我理解正确的话，您是对的，您希望处理App组件中的单击。如下所示：
class App extends Component {
state = {
showResultCard = true,
}
handleClick = () => {
this.setState({ showResultCard: false });
}
render() {
<ReactiveBase>
...
{this.state.showResultCard ? (
<ResultCard onClick={this.handleClick} ... />
) : (
<OtherComponent ... />
)}
</ReactiveBase>
}
}Stack Overflow用户
发布于 2019-05-30 00:03:44
最终通过使用基本组件ReactiveList而不是ReactiveCard使其正常工作。
ReactiveCard onData回调函数是一个包含图像、标题、描述和url字段的对象。不可能，返回其他东西。无法使用onClick属性。
所以，最好使用基础组件，自己做一些html和css。
import React, { Component } from 'react';
import { ReactiveBase, CategorySearch, SingleRange, ResultCard, ReactiveList} from '@appbaseio/reactivesearch';
class App extends Component {
constructor(props) {
super(props);
this.state = {
showResultCard : true,
};
}
handleClick = () => {
this.state.showResultCard ?
this.setState({ showResultCard: false }) : this.setState({ showResultCard: true });
}
render() {
return (
<ReactiveBase
app="artists"
url="https://admin:xxxxxxxxxx@node1.searchevolution.com:9200"
type="_doc">
{this.state.showResultCard ? (
<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>
<ReactiveList
componentId="result"
dataField="nom"
className="result-list-container"
size={5}
onData={(res) => <div>{res.nom}<button onClick={this.handleClick}>tttt</button></div>}
pagination
URLParams
react={{
and: ['searchbox'],
}}
/>
</div> ) : (<button onClick={this.handleClick}>back</button>)}
</ReactiveBase>
);
}
}
export default App;https://stackoverflow.com/questions/56333377
复制相似问题
腾讯云开发者
