React中按钮点击console.log仅短暂显示后消失的问题求助

问题根源 #

你的按钮嵌套在<form>标签内，HTML中按钮默认的type是submit，点击后会触发表单提交动作，导致页面刷新，控制台日志因此被清空。

解决办法 #

有三种可行方案，任选其一即可：

• 给按钮指定type为button
  显式设置按钮类型为普通按钮，避免触发表单提交：

  <button type="button" className='btn' onClick={() => console.log('hello')}>
    <img src='./images/logo2.png' className='btnImg' alt='logo' />
  </button>
  

• 在点击事件中阻止默认行为
  通过事件对象阻止表单提交的默认动作：

  <button className='btn' onClick={(e) => {
    e.preventDefault();
    console.log('hello');
  }}>
    <img src='./images/logo2.png' className='btnImg' alt='logo' />
  </button>
  

• 移除不必要的form标签
  如果这个表单不需要提交到服务器的功能，直接删除<form>和</form>标签即可，不影响页面布局和按钮功能。

内容的提问来源于stack exchange，提问作者Kyle