Question

我的render()里面有以下块（这是一个Bootstrap Button：https://react-bootstrap.github.io/components.html#buttons-options）：

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

以及以下功能：

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

每当我点击按钮时，我都可以看到＆＃34;处理请求＆＃34;问题出现在控制台日志中，但突然消失。我的理解是有些东西导致页面刷新。我出错的任何意见？

Answer 1

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

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

handleEntailmentRequest(e) {
    e.preventDefault();

    console.log("handle request ");
}

参考文献：

MDN - Event.preventDefault()

Answer 2

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

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


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

}

Answer 3

您可以阻止zerkms或

建议的默认行为

只需在按钮标记中添加type =“ button”。

例如：this.showSomething（'all'）}>全部

Answer 4

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

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

4 个答案: