Reactjs：页面在按钮的“onClick”句柄上刷新？

Question

我的

render()

中有以下块（这是一个 Bootstrap 按钮：https://react-bootstrap.github.io/components.html#buttons-options）：

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

以及以下功能：

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

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

Answer 1

默认按钮操作是提交表单。

如果您不需要 - 您需要防止这种情况：

handleEntailmentRequest(e) {
    e.preventDefault();

    console.log("handle request ");
}

参考资料：

• MDN -

  Event.preventDefault()

Answer 2

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

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

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

Answer 3

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

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


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

}

Answer 4

在React中添加属性

type="button"

后解决了我的问题。

Answer 5

是的！那确实有效！ 如果你的react-app意外刷新，你应该传递(e)作为事件参数，然后在函数体中使用

e.preventDefault()

，这将防止发生onClick事件的默认行为。

Answer 6

你也可以尝试这个：

import React from 'react';

function App() {
  
  function refreshPage() {
    window.location.reload(false);
  }
  
  return (
    <div>
      <button onClick={refreshPage}>Click to reload!</button>
    </div>
  );
}

export default App;

Answer 7

我不知道这有什么帮助。但我将 type="button" 添加到我正在使用的按钮中，我的问题得到了解决。我认为其他按钮元素不会发生这种情况。我使用了锚标记，这就是我遇到这个问题的原因。我按照以下方式使用锚标记，我的问题就消失了。

<a type="button" onClick={}></a>

Answer 8

我们可以使用 添加所有者 而不是锚标签它将解决您的问题