如何使用React和Redux搜索自動完成功能？

Question

我有一個名為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>
    )
  }

我的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>
    )
  }

因此，我意識到我需要重組大量的內容，因此我在尋找一般指導而非特定幫助。 我對React和redux相對較新，所以我可能並不了解。 我覺得我需要以某種方式在SearchInput建立connect以進行實際的搜索和自動完成。 有任何想法嗎？

Answer 1

SearchInput組件應對輸入標簽的每次更改（在輸入標簽的onChange函數中）提出ajax請求。 在ajax的回調函數中，新數據（新提示）應傳遞給Redux操作，以使用該數據更新商店。 商店的更新將觸發具有新提示的組件的重新渲染，作為商店中的新道具。

應該使用輸入標簽的onChange函數中的setState函數將搜索文本本身存儲在組件的狀態中。 這將允許搜索的ajax請求（單擊搜索按鈕並使用該ajax請求觸發事件函數之后）將文本輸入作為簡單狀態變量獲取。

單擊搜索按鈕后，應使用相同的體系結構更新搜索結果。

祝好運！