Question

我在 React.js 上开发示例应用程序时遇到问题当我点击一个自动刷新整个页面时，所以我看不到（只能通过调试）按钮是否正在执行该方法。

我与您分享我开发的两个组件

AForm 组件


import MyButton from '../Button/MyButton.jsx';


function AForm(){   

    const saludar = () =>{

        console.log("Hello World!!");   
       
        
    }

    return(

        <div>
            <form>
                <h2 className="text-center"> A Form</h2>
                <MyButton name={"Something"} onClickHandler={saludar}></MyButton>               
            </form>
        </div>
    );
}

export default AForm;

我的按钮组件



function MyButton({name,onClickHandler}){
    return(
        <div>
            <button onClick={() =>onClickHandler()}>{name}</button>
        </div>
    );
}

export default MyButton;

我尝试将 return false 添加到常量，但它仍然刷新整个页面

Answer 1

发生这种情况是因为当您单击表单中的按钮时，表单正在提交，从而导致页面刷新。避免将其添加到您的函数中：

const saludar = (event) =>{
        event.preventDefault();
        console.log("Hello World!!");   
    }

preventDefault 基本上意味着：阻止浏览器的默认行为（在这种情况下是提交表单和刷新页面）。希望有道理。

Answer 2

由于没有提到按钮的类型，所以表单内的按钮充当 type="submit" 按钮。这就是为什么点击按钮表单会被提交。

向按钮添加 type="button" 属性将修复它。

function MyButton({name, onClickHandler}){
    return(
        <div>
            <button type="button" onClick={() => onClickHandler()}>{name}</button>
        </div>
    );
}

export default MyButton;

这也可以通过 preventDefault()

实现

AForm 组件

import MyButton from '../Button/MyButton.jsx';

function AForm(){   
    const saludar = (e) =>{
        e.preventDefault();
        console.log("Hello World!!");
    }

    return(
        <div>
            <form>
                <h2 className="text-center"> A Form</h2>
                <MyButton name={"Something"} onClickHandler={saludar}></MyButton>               
            </form>
        </div>
    );
}

export default AForm;

我的按钮组件

温和的建议，仅在必要时才包含箭头功能。如果您没有传递任何参数，那么 onClick={(e) => onClickHandler(e)} 也可以写成 onClick={onClickHandler}

function MyButton({name, onClickHandler}){
    return(
        <div>
            <button onClick={onClickHandler}>{name}</button>
        </div>
    );
}

export default MyButton;

单击按钮时自动刷新

2 个答案: