Reactjs 单击按钮时自动刷新

在React.js上开发示例应用程序时，当我单击自动刷新整个页面时出现问题，因此我无法看到（仅通过调试）按钮是否正在执行该方法

我和你们分享我开发的两个组件

a表单组件

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

export default MyButton;

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;

从“../Button/MyButton.jsx”导入MyButton；
函数AForm（）{
const saludar=（）=>{
log（“你好，世界！！”）；
}
返回(
表格
);
}
导出默认格式；

我的按钮组件

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

export default MyButton;

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;

函数MyButton（{name，onClickHandler}）{
返回(
onClickHandler（）}>{name}
);
}
导出默认MyButton；

---

我已尝试将

return false

添加到const中，但它仍会刷新整个页面

这是因为当您单击表单中的按钮时，表单正在提交，从而导致页面刷新。要避免将此添加到函数中，请执行以下操作：

const saludar=（事件）=>{
event.preventDefault（）；
log（“你好，世界！！”）；
}

---

preventDefault

基本意思是：阻止浏览器的默认行为（在本例中是提交表单并刷新页面）。希望它有意义。

因为按钮没有提到类型，所以表单中的按钮充当

type=“submit”

按钮。这就是为什么点击按钮表单会被提交的原因

向按钮添加type=“button”属性将修复它

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

export default MyButton;

我的按钮组件

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

export default MyButton;

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;

函数MyButton（{name，onClickHandler}）{
返回(
{name}
);
}
导出默认MyButton；

看起来您的按钮正在提交表单。尝试在按钮组件上设置type='button'（默认值为'submit'）。但我不知道你为什么会有这个。非常感谢你，我按下type=“button”，它就停了。也谢谢你的建议。现在我正在改变它