Проблема с перезагрузкой сайта на React

Question

Почему страница перезагружается при каждом нажатии на кнопку "Ваши интересы". Как исправить данную проблему?

import logo from './logo.svg';
import './App.css';
import './styles/style.css'
import { useState } from 'react';

function App(e) {
  const onSubmit = (e) => {
    e.preventDefault();
  }
  const [show, setShow] = useState(false)
  const [toShow, settoShow] = useState(false)
  return (
   <>
  <div>
    <button onClick={() => setShow(!show)} className='btn1'>
      {show ? 'Скрыть': 'Показать'}
    </button>
  </div>

  {
    show && <div>
    <form className='form'>
     <label>
     <h2 className='tittle'>Регистрация</h2>
     <input placeholder='Введите имя' />
     <input placeholder='Введите фамилию' />
     <input placeholder='Ваш возраст' />
     <input placeholder='Введите ваш Email' />
     <input placeholder='Придумайте пароль' />
     <button onClick={()=>{settoShow(!toShow); onSubmit(e)} 
    }
     className='btn2'>
      Ваши интересы
     </button>
     <div>
     {
      toShow && 
      <>
      <input type="checkbox" />
      <input type="checkbox" />
      <input type="checkbox" />
      </>
     }
     </div>
    <button className='btn' onClick={onSubmit}>Регистрация</button>
     </label>
   </form>
    </div>
  }
</>
  );
}

export default App;

]2]2

Answer 1

Проблема в обработчике событий onClick(). Он не передает событие клика в функцию onSubmit(e), хоть в ней и прописан e.preventDefault() - событие предотвращается, но не передается. Должно быть так:

<button className={'btn2'} onClick={(e) => onSubmit(e)}>
  Ваши интересы
 </button>

Функция onSubmit должна выглядеть так:

const onSubmit = (e) => {
e.preventDefault();
settoShow(prev => !prev)
}

P.S. не совсем понимаю, зачем отправлять форму (submit) при клике на кнопки "Ваши интересы", должна быть одна кнопка, на которую повешена отправка формы, а остальные input и button меняют state, который связан с формой.

БЛОГ НА HUSL

Проблема с перезагрузкой сайта на React

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