Специфичный для Алголии => Как получить доступ к атрибутам попадания в реагирующих jsx - PullRequest
Новая
       23

Специфичный для Алголии => Как получить доступ к атрибутам попадания в реагирующих jsx

0 голосов
/ 20 мая 2019

У меня есть кликабельный элемент на странице, настроенный так: 

<div>
    <InstantSearch>
        <div>
            <SearchBox/>
            <InfiniteHits/>
        </div>
    </InstantSearch>
</div>

, где InfiniteHits - это консорциум Hit объектов: 

//Hit.js
<a onClick={() => this.handleSubmit(props.hit.attrib1, props.hit.attrib2)}>
    <img src={props.hit.image} align="left" alt={props.hit.name} />
    <div className="hit-name">
        <Highlight className="ais-Highlight-header" attribute="attrib1" hit={props.hit} />
        <Highlight className="ais-Highlight-state" attribute="attrib2" hit={props.hit} />
    </div>
    <p/>
    <div className="hit-description">
        <Highlight attribute="attrib3" hit={props.hit} />
    </div>
</a>

и вы, вероятно, можете увидеть, что я пытался сделать с onClick на данный момент, то есть для сохранения attrib1 и attrib2 в состояние (но действительно где угодно) через handleSubmit: 

handleSubmit = (attrib1, attrib2) => {
    this.setState({
        attrib1: attrib1,
        attrib2: attrib2
    });
}

Я почти уверен, что это не сработало, потому что я console.log() редактировал входные данные для handleSubmit, а attrib1 и attrib2 отображались как undefined.

TLDR: Мой вопрос заключается в том, как я могу получить доступ к атрибутам (которые я удостоверил с помощью Algolia Indice Configuration, которые доступны на стороне клиента) в моем коде, чтобы я мог сохранять то, что именно было нажато для использования. на следующей странице?

Для любопытных, это в основном полный файл Hit, с которым я работаю: 

class Hit extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            attrib1: null,
            attrib2: null
        };
    }

    render() {
        const props = this.props;
        return(
            <a id="cssID" href="/nextpage" onClick={() => this.handleSubmit(props.hit.attrib1, props.hit.attrib2)}>
                <img src={props.hit.image} align="left" alt={props.hit.name} />
                <div className="hit-name">
                    <Highlight className="ais-Highlight-header" attribute="attrib1" hit={props.hit} />
                    <Highlight className="ais-Highlight-state" attribute="attrib2" hit={props.hit} />
                </div>
                <p/>
                <div className="hit-description">
                    <Highlight attribute="attrib3" hit={props.hit} />
                </div>
            </a>
        )
    }
    handleSubmit = (attrib1, attrib2) => {
        this.setState({
            attrib1: attrib1,
            attrib2: attrib2
        });
        console.log(attrib1);//undefined :/
    }

}

1 Ответ

1 голос
/ 26 мая 2019

Hits & InfiniteHits предоставляет реквизит hitComponent, который принимает компонент для рендеринга каждой записи, полученной из Алголии.hitComponent отображается с реквизитом hit, который содержит информацию, хранящуюся в вашей записи.Вот пример записи: 

{
  "name": "MyName",
  "description": "MyDescription"
}

Теперь мы можем создать наш компонент для рендеринга этой записи: 

class Hit extends React.Component {
  onClickHanlder = (name, description) => {
    console.log(name);
    console.log(description);
  };

  render() {
    const { hit } = this.props;

    return (
      <article>
        <h1>{hit.name}</h1>
        <button onClick={() => this.onClickHanlder(hit.name, hit.description)}>
          Click on the Hit element
        </button>
      </article>
    );
  }
}

Этот пример можно найти в CodeSandbox .

...