点击事件刷新我的页面答案

【问题标题】：click event refresh my page点击事件刷新我的页面
【发布时间】：2018-05-24 19:26:00
【问题描述】：

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

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

  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];
     }

【问题讨论】：

标签： javascript reactjs react-redux

【解决方案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>

在getBeerByName 中没有e.preventDefault

【讨论】：

我尝试了您的解决方案。但我收到一个错误，说 TypeError: Cannot read property 'preventDefault' of undefined in getBeerByName.
@Dave_888 你是不是也通过e this.getBeerByName
是的，就像你说的。 ` `
哦，是的，它确实以这种方式工作。键入按钮如何工作而不提交？感谢您的帮助！
@Dave_888 因为如您所见in this link 向用户代理提交引发事件以获取表单但按钮类型不是。如果对你有帮助，请采纳答案

【解决方案2】：

也许是一个

e.preventDefault();

getBeerByName 末尾的某个地方会做你喜欢的事，但我对 React 不熟悉，所以你可以尝试一下。

【讨论】：