单击按钮时自动刷新

debugcn 发表于 Dev

马塞洛·努涅斯（Marcelonuñez）

在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到const，但仍然刷新整个页面

阿耶特·拉哈尼（Ajeet lakhani）

由于没有提及按钮的类型，因此表单内部的type="submit"按钮充当了按钮。这就是为什么单击按钮表单就被提交的原因。

将type =“ button”属性添加到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;

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。