Reactjs:在Button的`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

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

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


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

}

Answer 3

您可以按照 zerkms 或

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

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

Answer 4

在 React 中添加属性后type="button"解决了我的问题。