Question

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

当用户单击结果卡中的URL时，我想根据在弹性搜索簇中找到的结果，用呈现的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内容。

Answer 1

应该将处理程序命名为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>
  }
}

Answer 2

最后通过使用基本组件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;

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

2 个答案: