Как реализовать onclick в ResultCard и поменять div с другим компонентом

Question

Я хочу отобразить информацию о том, что пользователь нажимает на ResultCard.

Я хочу заменить содержимое divs (отображаемые в данный момент результаты) на отображаемый html на основе результата, найденного в моем кластере эластичного поиска (res), когда пользователь щелкнет URL-адрес в карточке результатов.

Я пытался добавить свойства onclick, но ничего не происходит. Документация Reactivesearch не содержит этот атрибут.

Конечно, я мог бы передать аргумент в свойствах url ResultCard и перенаправить пользователя на другую страницу, но страница была бы полностью перезагружена (с меню, определенным в 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;

Ожидаемый результат - изменение содержимого div с отображаемым html из другого компонента (еще не закодированного).

Answer 1

наконец-то начал работать, используя базовый компонент 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;

Answer 2

Обработчик должен называться 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>
  }
}