如何使用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請求觸發事件函數後）將文本輸入作爲簡單的狀態變量。

點擊搜索按鈕後，應該使用相同的架構來更新搜索結果。

祝你好運！