событие клика обновить мою страницу

Question

, поэтому я пытаюсь вызвать метод фильтра, используя следующую кнопку.Но проблема в том, что когда я нажимаю на нее, она автоматически обновляет мою страницу.Я извлекаю необходимые данные из моего бэкэнда и сохраняю их в локальном состоянии после метода рендеринга.Как я могу предотвратить перезагрузку, вызванную кнопкой, чтобы мой метод фильтра работал правильно?Спасибо!

функция извлечения (используется после функции рендеринга):

  saveFetchedBeers = () =>{

        if(this.state.beers.length ===0 && this.props.beers.loading===false ){

            this.state.beers= [...this.props.beers.beer];

        }
     }

состояние компонента:

 state= {
        beers:[]

    }

ввод и кнопка:

<input ref='searchByName' type="text" placeholder="Search.." name="search"></input>
<button type="submit" onClick={() => this.getBeerByName('NL')} >Submit</button>

Функция события клика:

  getBeerByName = (input,e) =>{

         let newArray = this.state.beers.filter(function (el){
             return el.name===input;
         });

         this.state.beers = [...newArray];
     }

Answer 1

Не могли бы вы попробовать это:

событие первого прохода с кликом:

<button type="submit" onClick={(e) => this.getBeerByName('NL',e)} >Submit</button>

, затем добавьте e.preventDefault() как это

 getBeerByName = (input,e) =>{
     e.preventDefault()
     let newArray = this.state.beers.filter(function (el){
         return el.name===input;
     });

     this.state.beers = [...newArray];
 }

или измените тип кнопкиbutton вот так

 <button type="button" onClick={() => this.getBeerByName('NL')} >Submit</button>

без e.preventDefault в getBeerByName

Answer 2

Возможно,

e.preventDefault();

где-нибудь в конце getBeerByName будет делать то, что вам нравится, но я не знаком с React, так что вы можете попробовать.