React.js模态框提交文本至后端时页面重载问题求助

页面重载的核心原因是表单默认提交行为未被阻止，浏览器会自动刷新页面，导致控制台日志被清空。以下是具体修复方案：

1. 阻止表单默认提交行为 #

在提交处理函数中添加e.preventDefault()，阻止浏览器的默认刷新行为：

修改AddRoomModal.js中的clickSubmit函数：

const clickSubmit = (e) => {
  e.preventDefault(); // 关键：阻止表单默认提交
  AddRoom(); // 无需传参，直接使用已维护的room_name状态
}

注意：原代码中AddRoom(e.target.value)传递的是按钮的value（此处按钮未设置value，实际为undefined），而输入框的值已经通过addRoom函数同步到room_name状态中，所以直接调用AddRoom()即可。

2. 优化表单处理逻辑（可选） #

更规范的写法是给<form>绑定onSubmit事件，代替按钮的onClick，贴合表单原生行为逻辑：

// 修改form部分代码
<form onSubmit={clickSubmit}>
  <input type="text" onChange={addRoom} value={room_name}/>
  <div className="done_button">
    <button className='btn btn-block btn-primary' type="submit">
      OK
    </button>
  </div>
</form>

3. 额外注意事项 #

• 避免接口地址为空：当building_state不是condo/office/house时，url_forgetroomname会变成undefined，导致请求失败，建议添加默认值：

  const url_forgetroomname = {
    "condo": "aaa.com",
    "office": "bbb.com",
    "house": "ccc.com"
  }[building_state] || "默认接口地址"; // 补充默认地址
  

• 检查依赖导入：确保代码中已导入axios、useState、useSelector等必要依赖（原代码未显示这些导入语句，需补充）。

修复后，提交操作不会触发页面重载，控制台可正常打印请求日志与响应信息。

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