0

我想在 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 内容。

4

2 回答 2

0

最后通过使用基础组件 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;
于 2019-05-29T16:03:44.010 回答
0

应该调用处理程序onClick而不是onclick（即使它看起来像 HTML，这是 JSX，所以处理程序需要是 camelCase）。

此外，除非你把它放在花括号中（告诉 JSX 执行代码），否则你的代码不会调用 alert。还有一件事：您想将其包装在一个函数中，否则将在组件安装时调用警报，而不是单击。

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>
  }
}
于 2019-05-27T23:35:38.020 回答