Question

所以我尝试使用以下按钮触发过滤方法。但问题是，当我点击它时，它会自动刷新我的页面。我从后端获取所需数据，并在render方法之后将其存储在本地状态。如何防止按钮引起的重载，所以我的过滤方法可以正常工作？谢谢！

获取函数（在渲染函数之后使用）：

  saveFetchedBeers = () =>{

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

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

        }
     }

组件的状态：

 state= {
        beers:[]

    }

输入＆amp;按钮：

<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，所以你可以尝试一下。

点击事件刷新我的页面

2 个答案: