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

Posted 2023-03-14

【中文标题】Reactjs：在Button的`onClick`句柄上刷新页面？

【英文标题】：Reactjs: page refreshing upon `onClick` handle of Button?

【发布时间】：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 ");

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

【问题讨论】：

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

【参考方案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 事件的默认行为发生。