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

Posted 2023-02-22

【中文标题】防止反应按钮组件中的默认按钮行为（页面重新加载）

【英文标题】：Preventing default button behavior (page reload) in react button component

【发布时间】：2019-08-23 04:07:00

【问题描述】：

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

主文件/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();
  

感谢您的帮助！

【参考方案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>

【参考方案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>
   

【参考方案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>

【参考方案4】：

将其添加到您的onClick：

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