如何使用 React 和 Redux 进行搜索自动完成?

Sha*_*oon -1 reactjs react-redux

我有一个名为的组件Home,它看起来像:

  render () {
    const clips = ObjectPath.get(this.props, 'search.data.clips.results', [])

    return (
      <div className='search__container right-content-wrapper'>
        <SearchInput
          value={this.props.autocomplete.query.q}
          placeholder='Search all the Vidys'
          status={this.props.autocomplete.status}
          hints={this.props.autocomplete.data}
          onType={this.props.onAutocomplete}
          onSubmit={this.props.onSearch}
        />

        <SearchResults
          results={clips}
          location={this.props.location}
          status={this.props.search.status}
        />
      </div>
    )
  }
Run Code Online (Sandbox Code Playgroud)

我的SearchInput样子:

  render () {
    const { value, hints, status } = this.props
    const hasResults = hints.length
    const areResultsVisible = hasResults && !this.state.hideAutocompleteResults && this.state.hasFocus

    return (
      <div className= {`search-input__component ${status}`}>

        {this.props.showLogo && (
          <a href="javascript:void(0);" className="logo-on-search"></a>
        )}

        <div className='input'>
          <input
            type='text'
            className='input-field'
            value={value}
            placeholder={this.state.placeholder}
            onFocus={::this.onFocus}
            onBlur={::this.onBlur}
            onKeyUp={::this.onKeyUp}
            onKeyDown={::this.hanleArrowKeys}
            onChange={::this.onChange}
          />
        </div>
        <button className="btn emoji"></button>
        <button className='btn submit' onClick={() => this.onSubmit()}></button>

        {(() => {
          if (!areResultsVisible && false) return

          const springConfig = {
            stiffness: 600,
            damping: 30
          }

          return <StaggeredMotion
            defaultStyles={hints.map((item) => ({ x: -10, o: 0, z: 1.1 }))}
            styles={(prevInterpolatedStyles) => prevInterpolatedStyles.map((_, i) => (
              i === 0
                ? {
                  o: spring(1, springConfig),
                  x: spring(1, springConfig),
                  z: spring(1, springConfig)
                }
                : {
                  o: spring(prevInterpolatedStyles[i - 1].o, springConfig),
                  x: spring(prevInterpolatedStyles[i - 1].x, springConfig),
                  z: spring(prevInterpolatedStyles[i - 1].z, springConfig)
                }
            ))}
          >
            {(styles) => (
              <div className='hints'>
                {styles.map((style, i) => (
                  <div
                    key={i}
                    className={`hint${i === this.state.hintSelection ? ' selected' : ''} ${hints[i].type}`}
                    onClick={() => this.onHintClick(hints[i])}
                    onMouseEnter={() => this.setState({ hintSelection: i })}
                    style={{
                      transform: `translateX(${style.x}px)`,
                      opacity: style.o
                    }}
                  >
                    <div className='hint-content'>
                      <div className='hint-title'>{this.highlightMatch(hints[i])}</div>
                      {(() => hints[i].type !== 'phrase' && <div className='hint-type'>{hints[i].type}</div>)()}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </StaggeredMotion>
        })()}
      </div>
    )
  }
Run Code Online (Sandbox Code Playgroud)

所以我意识到我需要重组大量的东西,所以我正在寻找一般指导而不是具体帮助。我对 React 和 比较陌生redux,所以我可能不了解这一切。我觉得我莫名其妙地需要建立一个connectSearchInput做实际的搜索和自动完成。有任何想法吗?

小智 5

SearchInput 组件应该对 input 标签的每次更改(在 input 标签的 onChange 函数中)发出一个 ajax 请求。在 ajax 的回调函数中,新数据(新提示)应该传递给 Redux 操作以使用该数据更新存储。store 的更新将触发重新渲染具有新提示的组件作为 store 的新道具。

搜索文本本身应该使用 input 标签的 onChange 函数中的 setState 函数存储在组件的状态中。这将允许搜索的 ajax 请求(在单击搜索按钮并使用该 ajax 请求触发事件函数之后)获取文本输入作为简单的状态变量。

单击搜索按钮后,应使用相同的架构来更新搜索结果。

祝你好运!