Question

我有一个带有React Redux的导航栏和一个导航栏。我正在尝试将一个机器人添加到我的列表中，当我单击添加机器人按钮后，该页面就会开始刷新，并且我添加的机器人正在消失。如何停止页面刷新。我已经尝试过使用e.preventDefault，但是它不起作用！

import React from 'react';

const AddRobot = ({
    name,
    nameChange,
    addToList
}) => {
    const emailInput = React.useRef();
    const nameInput = React.useRef();
    const userInput = React.useRef();


    const clearInputs = () => {
        emailInput.current.value = "";
        nameInput.current.value = "";
        userInput.current.value = "";
    };

    const fixloading = (e) => {
        e.preventDefault();
    };


    return ( <
        div >
        <
        h1 > Add Robot By Name < /h1>


        <
        input className = 'pa2 ba b--green bg-lightest-blue'
        placeholder = 'Add Name'
        value = {
            name
        }
        onChange = {
            nameChange
        }
        ref = {
            nameInput
        }
        />

        <
        input className = 'pa2 ba b--green bg-lightest-blue'
        placeholder = 'Add Username'
        ///value={username}
        ///onChange={username}
        ref = {
            userInput
        }
        />

        <
        input className = 'pa2 ba b--green bg-lightest-blue'
        name = "email"
        placeholder = 'Add Email'
        ///value={email}
        ///onChange={handleEmail}
        ref = {
            emailInput
        }

        />

        <
        a className = "f50 link dim ph3 pv2 mb2 dib white bg-dark-green ma2"
        href = "addRobo"
        onClick = {
            addToList
        } >
        Add Robot <
        /a>

        <
        a className = "f50 link dim ph3 pv2 mb2 dib white bg-dark-green ma1"
        href = "#0"
        onClick = {
            clearInputs
        } >
        Reset Inputs <
        /a>


        <
        /div>
    );
}


export default AddRobot;

Answer 1

如果该元素不是链接，则<a>是您所需的错误html标记。

请改用<button type="button" onClick={myFunc}>Button</button>，以使其按预期方式工作。您可以设置按钮元素的样式，使其外观与锚点相同。

Answer 2

只需更改

<a className="f50 link dim ph3 pv2 mb2 dib white bg-dark-green ma2" href="addRobo" onClick={addToList}>Add Robot </a>

添加到<span>标记中，也可以保留它，并将#放在href属性中，例如href="#addRobo"。

单击按钮时阻止页面刷新

2 个答案: