Предотвратить обновление страницы при нажатии кнопки

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".