首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

input回车页面提交导致出现HTTP 错误 405.0 - Method Not Allowed

前些时间在做一个搜索功能时发现一个比较有意思的现象,场景是这样的:一个模态窗口中是一个订单列表,页面的顶部有若干个状态筛选框和一个搜索关键字输入框,当焦点在关键字输入框时按回车,本来是对input的keyup...事件做了监听,当发现是按了回车键时便自动提交搜索请求的,但输入关键字后按回车时页面竟然跳转了,并且出现“HTTP 错误 405.0 - Method Not Allowed无法显示您正在查找的页面,因为使用了无效方法...按照错误信息及现象(页面跳转了)来看,应该是因为触发了页面提交了,但事实上,当在keyup事件里面alert时,根本还没有执行到keyup事件里面去就已经跳转了。...于是搜索了一些资料来看,结果发现html规范的一种约定:如果一个form里只有一个input,那么无论有无submit按钮或绑定事件,只要在这个焦点在这个input里并且按下回车按钮时,都会执行自动提交表单的操作...自动提交的动作本身浏览器默认事件绑定的,按键盘的操作就是keyup和keydown,我原本的按键监听是keyup事件里写的,所以把keydown事件重写,然后终止默认事件执行就OK了。

1.8K10
您找到你想要的搜索结果了吗?
是的
没有找到

翻译 | 玩转 React 表单 —— 受控组件详解

单选框 复选框 文本域 下拉选择框 同时也包含: 表单数据的清除和重置 表单数据的提交 表单校验 点击这里直接查看示例代码。...受控组件有两个特点: 受控组件提供方法,让我们每次 onChange 事件发生时控制它们的数据,而不是一次性地获取表单数据(例如用户点提交按钮时)。...“被控制“ 的表单数据保存在 state 本文示例,是父组件或容器组件的 state)。...2. handleFormSubmit 为了提交表单数据,我们从 state 抽取需要提交的属性值,创建了一个对象。接着使用 AJAX 库或技术将这些数据发送给 API(本文不包含此类内容)。...}; console.log('Send this in a POST request:', formPayload); this.handleClearForm(e); } 请注意我们提交数据执行

11.4K100

React技巧之表单提交获取input值

~ 总览 React,通过表单提交获得input的值: state变量存储输入控件的值。...form表单上设置onSubmit属性。 handleSubmit函数访问输入控件的值。...为了获得表单提交时的输入值,我们只需访问state变量。如果你想在表单提交清空控件值,可以设置state变量为空字符串。 不受控控件 类似地,可以使用不受控制的输入控件。...reset 如果你想在表单提交清除不受控制的input值,你可以使用reset()方法。 reset()方法还原表单元素的默认值。...不管你的表单有多少不受控制的输入控件,只要调用reset()方法就可以清除所有的字段。 当表单被提交时,获取输入控件值的另一种方法是,使用name属性访问表单元素。

1.5K20

Rc-form: 消失的“Ta”

A 从 A1 切换到 A2 ,之前展示的 C, D 字段应该注销了呀?为什么 D 字段表单提交的时候还会执行自己的校验规则呢?...改完代码,小 H 再次按照 bug 触发的链路操作了一番。不出所料,这次表单可以正常提交了,于是小 H 提交完代码便心满自足地走去了餐厅。...小 H 十分不解,便又在提交按钮的点击回调函数打起了断点,原来,当 A 从 A1 切换到 A2 提交,不仅执行了 D 字段的校验函数,同时 D 字段的值也被保留了下来,并随着提交接口保存到了后端。...首先,从提交按钮点击回调的调试我们发现,C 字段的值我们从 A1 切换到 A2 后会正常消失,而且 C 的校验函数提交时也并不会被执行。为什么 C 会消失,而 D 不会?...果然,添加 ref 支持字段值被正常销毁且校验函数也不再被调用。

17910

JqueryForm的使用方式

‘script’:如果dataType == ‘script’, 服务器响应将求值成纯文本。...name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ] 默认值:null success 表单成功提交调用的回调函数...如果提供”success”回调函数,当从服务器返回响应它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。...该方法将所有的文本(text)输入字段、密码(password)输入字段文本区域(textarea)字段置空,清除任何select元素的选定,以及将所有的单选(radio)按钮和多选(checkbox...$('#myFormId').clearForm(); clearFields() 清除字段元素。只有部分表单元素需要清除时才方便使用。 可链接(Chainable):可以。

2.3K20

前端规范指南,让团队代码如出一辙!ESLint + Prettier + husky + lint-staged

常见的钩子 pre-commit:执行提交操作之前触发。适合用于提交代码之前运行代码检查、格式化等操作。 commit-msg:提交消息(Commit Message)编写完成触发。...post-commit:提交操作完成触发。适合用于执行提交的自动化流程、生成文档等。 具体的使用步骤如下: # 安装 注意!...# 配置 ctrl + s ,自动保存功能 第一种, vscode 设置里面配置 点击 Vscode 的设置=>工作区=>文本编辑器 # Commitizen 是一个命令行工具,用于以一致的方式编写规范的提交消息... package.json 添加一个 config.commitizen 的字段,并设置它的值为 cz-conventional-changelog。...字段添加一个 commit 的命令。

1.6K30

TDesign 更新周报(2022年9月第1周)

Cascader 点击清除按钮表现异常的问题 @pengYYYYY (#1457)Watermark: 修复 removable 属性设置不生效,及 content 不支持动态修改变化的问题 @carolin913...ojhaywood (#1438)Button: 修复幽灵按钮 loading 状态背景色 @DevinXian (#1432)DatePicker:修复 cell-click 事件 partial 字段错误... Popup 更为 Tooltip,方便定义提醒文本主题色,issue#1369 @chaishi (#1420)Dropdown:支持下拉菜单项自定义不同主题 @Isabella327 @uyarn ...setFields 方法异常场景 @HQ-Lin (#1394)禁用 input 输入框回车自动提交表单 @HQ-Lin (#1403)DatePicker:修复 cell-click 事件失效问题 ...@HQ-Lin (#1399)修复传入空字符串导致页面崩溃问题 @HQ-Lin (#1418)Message: 修复更改前缀插件调用展示异常问题 @kenzyyang (#1431)详情见:https

2.6K20

React非受控组件

React,组件的状态(state)通常由组件自身管理和控制。然而,有时我们也可以使用非受控组件来处理表单元素或其他用户输入,这意味着我们不需要显式地管理和更新组件的状态。...非受控组件React的非受控组件是指那些其值不由React的状态管理的组件。相反,它们依赖于底层的DOM元素来存储和管理数据。我们可以使用ref来访问和操作非受控组件的值。...以下是一个示例,展示了如何在React创建一个非受控的输入组件:import React from 'react';class UncontrolledComponent extends React.Component...该组件包含一个文本输入框和一个提交按钮。我们使用ref来获取文本输入框的引用,并将其存储this.inputRef。...例如,当需要在表单提交时获取表单字段的值,并进行后续处理时,非受控组件是一个不错的选择。第三方库集成:有时我们可能需要与第三方库集成,这些库可能依赖于底层DOM元素来存储和管理数据。

66020

React生命周期

在为React.Component子类实现构造函数时,应在其他语句之前前调用super(props),否则this.props构造函数可能会出现未定义的错误。...Portals,可以渲染子节点到不同的DOM子树。 字符串或数值类型,它们DOM中会被渲染为文本节点。...(提交到DOM节点)之前调用,它使得组件能在发生更改之前从DOM捕获一些信息(例如滚动位置),此生命周期的任何返回值将作为参数传递给componentDidUpdate(),该方法应返回snapshot...,例如清除timer、取消网络请求或清除componentDidMount()创建的订阅等。...static getDerivedStateFromError(error) {} componentDidCatch() 此生命周期在后代组件抛出错误被调用,componentDidCatch()会在提交阶段被调用

2K30
领券