有没有人遇到过这个问题?我已经完全剥离了我的应用程序,基本上只是一个新的react 应用程序中的一个shell ,所以它只是一个布局和一个控制台.

  return (
    <div className='mainDiv'>
      <form className='inputDiv'>
        <div className='dayDiv'>
          <label htmlFor='day'>DAY</label>
          <input type='number' placeholder='DD' name='day' id='day' min='1' max='31' ></input>
        </div>
        <div className='monthDiv'>
          <label htmlFor='month'>MONTH</label>
          <input type='number' placeholder='MM' name='month' id='month' min='01' max='12'></input>
        </div>
        <div className='yearDiv'>
          <label htmlFor='year'>YEAR</label>
          <input type='number' placeholder='YYYY' name='year' id='year' min='1900' max='2023'></input>
        </div>
        <div className='lineDiv'>
          <div className='lineBtn'>
            <div className='break' />
            <button className='btn' onClick={() => console.log('hello')}>
              <img src='./images/logo2.png' className='btnImg' alt='logo' />
            </button>
          </div>
        </div>
      </form>
      <div className='dataDiv'>
        <p>
          <span className='spanNumbers'>--</span>
          <span className='spanText'>years</span>
        </p>
        <p>
          <span className='spanNumbers'>--</span>
          <span className='spanText'>months</span>
        </p><p>
          <span className='spanNumbers'>--</span>
          <span className='spanText'>days</span>
        </p>
      </div>
      <div>
      </div>
    </div>
  )
}

当我点击按钮时,它会在我的Chrome控制台上出现大约半秒钟,然后它看起来就像是控制台刷新了,然后它就消失了

我读到过类似的问题,它是一个扩展,但我已经删除了我所有的扩展,但它仍然不起作用,我没有在Chrome控制台或我的vscode控制台上显示任何错误,所以我真的很难解决这个问题

推荐答案

您的buttonform组件中,因此默认情况下该按钮将是type='submit'.

您需要将其设置为type='button'以阻止表单提交

    <div className='mainDiv'>
      <form className='inputDiv'>
        <div className='dayDiv'>
          <label htmlFor='day'>DAY</label>
          <input type='number' placeholder='DD' name='day' id='day' min='1' max='31' ></input>
        </div>
        <div className='monthDiv'>
          <label htmlFor='month'>MONTH</label>
          <input type='number' placeholder='MM' name='month' id='month' min='01' max='12'></input>
        </div>
        <div className='yearDiv'>
          <label htmlFor='year'>YEAR</label>
          <input type='number' placeholder='YYYY' name='year' id='year' min='1900' max='2023'></input>
        </div>
        <button className='btn' type="button" onClick={console.log('hello')}>
          hello
        </button>
      </form>
    </div>

Javascript相关问答推荐

可以将SuperTest导入为ES 6模块吗?

Express.js:以块形式发送响应

Vue Quill css仅应用于我的第一个Quill Editor组件+如何自定义工具栏

为什么在集内和集外会产生不同的promise 状态(使用Promise.race)?

是什么原因导致此Angular 16电影应用程序中因类型错误而不存在属性?

仅圆角的甜甜圈图表

Bootstrap动态选项卡在切换选项卡后保持活动状态,导致元素堆叠

django无法解析余数:[0] from carray[0]'

如何在Javascript中使用Go和检索本地托管Apache Arrow Flight服务器?

如何使用子字符串在数组中搜索重复项

单个HTML中的多个HTML文件

使用getBorbingClientRect()更改绝对元素位置

覆盖加载器页面避免对页面上的元素进行操作

NG/Express API路由处理程序停止工作

为什么客户端没有收到来自服务器的响应消息?

使用auth.js保护API路由的Next.JS,FETCH()不起作用

TypeError:无法读取未定义的属性(正在读取';宽度';)

输入的值的类型脚本array.排序()

是否可以在不更改组件标识的情况下换出Reaction组件定义(以维护状态/引用等)?如果是这样的话,是如何做到的呢?

Clip-Path在网页浏览器(Mozilla、Edge、Chrome)上不能正常工作,但在预览版Visual Code Studio HTML、CSS、JS上却能很好地工作