Programmatically close Searchbar in React

Questions
1

There are Searchbar Methods in docs - https://framework7.io/react/searchbar.html#searchbar-methods

But I wonder, how I can use them inside React component’s methods? Since I don’t have a searchbar variable?

class SearchPage extends React.Component {
  myMethod () {
    // How can I get a searcbar var here?
    searcbar.disable()
  }  

  render() {
    return (
      ...
      <Subnavbar inner={false}>    
        <Searchbar.. />
      </Subnavbar>
  )}
}
2

For now I use this approach:

onSeachbarSubmit(e: any) {
  ...
  this.$f7router.app.searchbar.disable(e.target)
}

<Searchbar
  onSubmit={this.onSeachbarSubmit.bind(this)}
></Searchbar>

Am I doing right? Or there is a more convenient way?

3

You can do this as shown below: you can define a variable search and define what the search contains inside the componentDidMount, after that you can use search.disable() anywhere. You need to define a className for the searchbar and on the searchbar.get you pass that classname

var search=null;
    class SearchPage extends React.Component {
      myMethod () {
        // How can I get a searcbar var here?
        search.disable()
      }  

    componentDidMount={()=>{
    search=this.$f7.searchbar.get(".mySearchbar");
    }}

      render() {
        return (
          ...
          <Subnavbar  inner={false}>    
            <Searchbar className={"mySearchbar"} />
          </Subnavbar>
      )}
    }
1 Like
4

Thank you for advice!