В React исчазает вывод в console

Question

У меня есть такой код в App.js:

    import "./styles.css";
import { useState } from "react";

export default function App() {
  const [num, setNum] = useState("");

  const plus = (num) => {
    num = num + num;
    console.log(num);
  };

  return (
    <div className="App">
      <form>
        <input
          type="text"
          value={num}
          onChange={(e) => setNum(e.target.value)}
        />
        <button type="submit" onClick={() => plus(num)}>
          +
        </button>
      </form>
    </div>
  );
}

Проблема заключается в том, что я выводу num в консоль, но в консоли это значение появляется на пол секунды, а потом пропадает. Я новичок в React, так что, не злитесь, если буду что-то не понимать в ваших объяснениях :)

Answer 1

я выводу num в консоль, но в консоли это значение появляется на пол секунды, а потом пропадает

Дело в том что у тебя при нажатии на submit кнопку происходит отправка формы.

Поскольку у формы атрибут action не определен, данные отправляются на эту же страницу.

Страница перезагружается и консоль очищается.

Можно это "остановить" вот так.

const domContainer = document.querySelector('#root');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);


function App() {
  const [num, setNum] = React.useState("");

  const plus = (num, e) => {
    e.preventDefault()
    num = num + num;
    console.log(num);
  };

  return (
    <div className="App">
      <form>
        <input
          type="text"
          value={num}
          onChange={(e) => setNum(e.target.value)}
        />
        <button type="submit" onClick={e => plus(num, e)}>
          +
        </button>
      </form>
    </div>
  );
}

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

<div id='root'></div>

P.S. Вот только менять стейтовую переменную без "ее метода" - не есть хорошая практика. Рендера после такого не последует...

БЛОГ НА HUSL

В React исчазает вывод в console

Ответы (1 шт):