Algolia-specific => 如何访问 react jsx 中的命中属性

Question

我在页面中有一个可点击的命中元素，设置如下：

<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 :/
    }

}

Answer 1

Hits & InfiniteHits expose a hitComponent 属性采用一个组件来呈现从 Algolia 检索到的每条记录。 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 上找到此示例。

Algolia-specific => 如何访问 react jsx 中的命中属性

Algolia-specific => How to access hit attributes within react jsx

attributes

state

reactjs

algolia