Question

对不起，如果我问的是以前已经回答过的问题。我做了尽职调查，但也许我没有正确理解。我目前正在尝试在React应用中使按钮不重新加载页面，而只是刷新状态。

主文件/App.js：

<Button
    onClick={() => this.callAPI('api')}
    type="success"
    className="input-lg">
    Search
</Button>

按钮组件：

import React from "react";

function Button({ type = "default", className, children, onClick }) {

  return (
    <button onClick={onClick} className={["btn btn-lg", `btn-${type}`, 
    className].join(" ")}>
    {children}
    </button>
  );
}

export default Button;

我尝试更改按钮类型，并尝试制作一个新功能，然后将其添加到onClick：

componentDefault = function (e) {
    e.preventDefault();
  }

感谢您的帮助！

Answer 1

import React from "react";

function Button({ type = "default", className, children, onClick }) {

  return (
    <button type="button" onClick={onClick} className={["btn btn-lg", `btn-${type}`, 
    className].join(" ")}>
    {children}
    </button>
  );
}

export default Button;



<Button
    onClick={(e) => {e.preventDefault();this.callAPI('api');}}
    type="success"
    className="input-lg">
    Search
</Button>

Answer 2

我不确定您的代码的实际结构，但是我会做类似的事情

class SomeComponent extends React.Component {
   constructor(props) {
     super(props)
     this.onClick = this.onClick.bind(this);
   }
   onClick(e) {
   e.preventDefault();
   // Do something
   }
   render() {
     return (
        <button onClick={this.onClick}>Button Text</button>
   }

}

Answer 3

如果在Form内，它将变成一个submit按钮。

我建议您稍微更改一下代码：

import React from "react";

function Button({ type, style = "default", className, children, onClick }) {

  return (
    <button type={type} onClick={onClick} className={["btn btn-lg", `btn-${style}`, 
    className].join(" ")}>
    {children}
    </button>
  );
}

export default Button;

尝试将其传递为button类型：

<Button type="button">Reload</Button>

Answer 4

将其添加到您的onClick中：

onClick={(e) => { this.callAPI('api'); e.preventDefault() }}

防止React按钮组件中的默认按钮行为（页面重新加载）

4 个答案: