在React JS中清除搜索结果

时间:2018-11-13 05:00:46

标签: reactjs

在搜索按钮之后,我们有四个年份过滤器按钮,但是当我们在搜索中键入查询时,如果不存在该查询,则仍会显示以前的搜索结果。 如果查询为空,我需要清除搜索结果和过滤器。 以下是代码:

//Constructor   
constructor(props) {
    super(props)
    this.state = {value: this.props.routing.query['q']}
    this.handleChange = this.handleChange.bind(this)
}

//event
handleChange(event) {
    this.setState({value: event.target.value})
    this.props.setQuery(event.target.value)
    this.props.setURLQuery(event.target.value)
    this.props.getSearchResults()

}

//render function

<div className="container flex-container-archival">
              <div className="input__wrap archivalsearch grow-2">
                  <input className="input input--brand" value={this.state.value} onKeyDown={this.keyPress} type="text" autoComplete="off" autoFocus placeholder="Sok pa namn, avdelning, roll etc." onChange={this.handleChange} />
                  <Icon iconName="search" iconBlock={true} iconClass="input__icon input__icon--right" />
              </div>


 <div className="container__indentation--left-only">
 <Filter/>
  {!this.props.isLoading &&
    <Message {...this.props.message}/>
  }

  {!this.props.hideLoadMore &&
    <LoadMore
      onClick={this.getSearchResults}
      disabled={this.props.isLoading}
    />
      }
</div>

0 个答案:

没有答案