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相对较新，所以我可能不会理解这一切。我觉得我需要在connect中设置一个SearchInput来进行实际搜索和自动完成。有什么想法吗？

Answer 1

SearchInput组件应在输入标记的每次更改时（在输入标记的onChange函数中）发出ajax请求。在ajax的回调函数中，新数据（新提示）应传递给Redux操作，以使用该数据更新商店。商店的更新将触发重新渲染组件，并将新提示作为商店的新道具。

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

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

祝你好运！

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

1 个答案: