2

I need help in making the component search fire up only when a submit button is clicked or hit enter key. not as the user types.

I have set up my state and used onValueChange method to get the value entered made the button

state={
        searchText: ""
    }
......
...
onValueChange= {(e) => this.setState({searchText:e.target.value})}

  <button type="button >
       Search
  </button>

I want my button to get that value and make the query run when hit submit or press enter. thanks for help

ravibagul91
  • 20,072
  • 5
  • 36
  • 59
Abhinav Kumar Gurung
  • 21
  • 1
  • 3

2 Answers2

1

You can read the docs on controlled behavior in ReactiveSearch over here. I have also implemented a small example for the above situation you check the demo here.

Yash Joshi
  • 2,586
  • 1
  • 9
  • 18
-1

Just you have to do is ,
set the state (eg. showResult) as true on onClick event of the search button,
And then just add condition to the result list or result card.

Like this:

{showResult ? 
 (<ReactiveList
    componentId="results"
    dataField={selected}
    size={15}
    sortBy={sort}
    loader={<ProductLoader />}
    react={{
     and: andQuery
    }}
    onAllData={(results, loadMoreData) => this.getProduct(results)}
   />)
 : ""}
Sachin Dongare
  • 58
  • 1
  • 7
  • I don't think this should fix this also instead of rending empty `string` we can render `null`. Here is the drawback for this: 1. No Results displayed when the state is false ( Initial Mount ) 2. When will be the state reset after the user has clicked the button? – Yash Joshi Aug 21 '19 at 12:21