Reactjs：在Button的`onClick`句柄上刷新页面？答案

【问题标题】：Reactjs: page refreshing upon `onClick` handle of Button?Reactjs：在Button的`onClick`句柄上刷新页面？
【发布时间】：2016-07-07 22:28:19
【问题描述】：

我的render() 中有以下块（这是一个引导按钮：https://react-bootstrap.github.io/components.html#buttons-options）：

<Button type="simpleQuery" onClick={this.handleEntailmentRequest.bind(this)}>
   Query
</Button>

还有以下功能：

handleEntailmentRequest() {
    console.log("handle request ");
}

当我点击按钮时，我可以看到控制台日志中出现“处理请求”问题，但突然消失了。我的理解是某些原因导致页面刷新。有什么意见我哪里出错了吗？

【问题讨论】：

我遇到的问题是试图变得聪明并使整个列表项可点击。因此，当我控制台记录我正在获取的数据时，它会为每个列表项呈现。唯一的解决方案是添加一个按钮来处理单击事件，现在它可以正常工作了。要么，要么让整个列表项成为一个按钮，呵呵。

标签： javascript reactjs

【解决方案1】：

默认的按钮动作是提交表单。

如果您不需要 - 您需要防止：

handleEntailmentRequest(e) {
    e.preventDefault();

    console.log("handle request ");
}

参考资料：

MDN - Event.preventDefault()

【讨论】：

在 Reactjs（tsx 文件）中，我让它按照以下方式工作，handleEntailmentRequest(e:Event) { .... }

【解决方案2】：

页面重新加载问题的完整解决方案是：

<Button type="simpleQuery" onClick={(e) => {this.handleEntailmentRequest(e)}}>
   Query
</Button>


handleEntailmentRequest(e){
    e.preventDefault();
    //do something...

}

【讨论】：

【解决方案3】：

您可以按照 zerkms 的建议阻止默认行为或

只需在按钮标签中添加 type="button" 即可。

例如：this.showSomething('all')}>All

【讨论】：

【解决方案4】：

是的！那确实奏效了！如果您的 react-app 被意外刷新，您应该将 (e) 作为事件参数传递，然后在函数体中使用 e.preventDefault()，这将防止 onClick 事件的默认行为发生。

【讨论】：