精华内容
下载资源
问答
  • 初学框架的学生,请问下怎样实现在主页home.html有一个表单搜索框,点击搜索能跳转到search.html的页面,并且把搜索框内的值对应的数据同时查询出来,在search.html页面上显示。前端方面不是特别懂,之前一直通过...
  • react项目中如何使用antd的form组件,动态设置input的值发布时间:2020-10-26 14:20:54来源:亿速云阅读:123这期内容当中小编将会给大家带来有关react项目中如何使用antd的form组件,动态设置input的值,文章内容...

    react项目中如何使用antd的form组件,动态设置input框的值

    发布时间:2020-10-26 14:20:54

    来源:亿速云

    阅读:123

    这期内容当中小编将会给大家带来有关react项目中如何使用antd的form组件,动态设置input框的值,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

    问题:

    创建账号时,输入账号后不搜索直接保存,提示查询后,再点搜索就不能搜索这个账号了

    原因:

    点击保存之后,对表单进行了验证,导致之后请求的数据无法在更新到input框中,也就是说即使在state中有值,也不会更新initialValue值,就导致搜索后的值不能正确填入input中,表单也就提交不了。

    解决办法:

    不使用initialValue设置动态更新的值,而是使用 this.props.form.setFieldValue({name:data}); 用于动态更新值,就可以解决了。

    if (result.code===0) {

    if (result.data) {

    this.props.form.setFieldsValue({name:result.data});

    }

    }

    ps:

    还有一个问题,如果输入了账号进行搜索后匹配了name,也填入了input框中。但是又修改了账号,然后直接提交,就会导致账号和name不匹配,也就是name是存在的,但就不是对应的账号了。会导致保存之后,如果正确的账号和name已经存在,数据库出现数据存储问题。

    解决:

    给账号输入的Input框添加onChange事件,来触发如果有改变就清空name框,防止错误提交

    change = (event) => {

    this.props.form.setFieldsValue({name:''});

    }

    记录一下

    补充知识:重新封装Antd Input组件,解决中文输入问题

    我就废话不多说了,大家还是直接看代码吧~

    import React, { useState, useEffect } from 'react'

    import { Input } from 'antd'

    function BaseHOC(key) {

    return function(props) {

    const { defaultValue, value, onChange } = props

    const hasValue = props.hasOwnProperty('value')

    // 用户切换到底是显示 value 还是 input

    // 不能直接用 isOnComposition 原因是,这个值发生变化不会触发重新渲染

    // 不能只使用 flag 原因是,setFlag 是异步的

    const [flag, setFlag] = useState(false)

    // 非中文输入时候显示 value。中文输入的时候显示 input

    const [input, setInput] = useState(hasValue ? value : defaultValue)

    useEffect(

    function() {

    if (hasValue && input !== value) {

    setInput(value)

    }

    },

    [value]

    )

    let isOnComposition = false

    function handleChange(e) {

    setInput(e.target.value)

    if (isOnComposition) return

    onChange && onChange(e)

    }

    function handleComposition(e) {

    if ('compositionend' === e.type) {

    isOnComposition = false

    handleChange(e)

    } else {

    isOnComposition = true

    }

    if (flag !== isOnComposition) {

    setFlag(isOnComposition)

    }

    }

    let Component = Input

    if (key) {

    Component = Input[key]

    }

    return (

    {...props}

    value={hasValue && !flag ? value : input}

    onCompositionStart={handleComposition}

    onCompositionUpdate={handleComposition}

    onCompositionEnd={handleComposition}

    onChange={handleChange}

    />

    )

    }

    }

    const Component = function(props) {

    return BaseHOC()(props)

    }

    Component.Search = function(props) {

    return BaseHOC('Search')(props)

    }

    Component.TextArea = function(props) {

    return BaseHOC('TextArea')(props)

    }

    Component.Password = Input.Password

    Component.Group = Input.Group

    export default Component

    上述就是小编为大家分享的react项目中如何使用antd的form组件,动态设置input框的值了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。

    展开全文
  • 在最近的项目当中就使用 Vant 作为移动端的基础UI框架,但在实践过程中发现该框架和其他框架有不一样的地方。例如它不内置表单验证,接下来,我把自己实现验证框架的思路分享出来。 分析需求 我们找的插件主要能...
  • 点击保存之后,对表单进行了验证,导致之后请求的数据无法在更新到input中,也就是说即使在state中有值,也不会更新initialValue值,就导致搜索后的值不能正确填入input中,表单也就提交不了。解决办法:不使用...

    问题:

    创建账号时,输入账号后不搜索直接保存,提示查询后,再点搜索就不能搜索这个账号了

    原因:

    点击保存之后,对表单进行了验证,导致之后请求的数据无法在更新到input框中,也就是说即使在state中有值,也不会更新initialValue值,就导致搜索后的值不能正确填入input中,表单也就提交不了。

    解决办法:

    不使用initialValue设置动态更新的值,而是使用 this.props.form.setFieldValue({name:data}); 用于动态更新值,就可以解决了。

    if (result.code===0) {

    if (result.data) {

    this.props.form.setFieldsValue({name:result.data});

    }

    }

    ps:

    还有一个问题,如果输入了账号进行搜索后匹配了name,也填入了input框中。但是又修改了账号,然后直接提交,就会导致账号和name不匹配,也就是name是存在的,但就不是对应的账号了。会导致保存之后,如果正确的账号和name已经存在,数据库出现数据存储问题。

    解决:

    给账号输入的Input框添加onChange事件,来触发如果有改变就清空name框,防止错误提交

    change = (event) => {

    this.props.form.setFieldsValue({name:''});

    }

    记录一下

    补充知识:重新封装Antd Input组件,解决中文输入问题

    我就废话不多说了,大家还是直接看代码吧~

    import React, { useState, useEffect } from 'react'

    import { Input } from 'antd'

    function BaseHOC(key) {

    return function(props) {

    const { defaultValue, value, onChange } = props

    const hasValue = props.hasOwnProperty('value')

    // 用户切换到底是显示 value 还是 input

    // 不能直接用 isOnComposition 原因是,这个值发生变化不会触发重新渲染

    // 不能只使用 flag 原因是,setFlag 是异步的

    const [flag, setFlag] = useState(false)

    // 非中文输入时候显示 value。中文输入的时候显示 input

    const [input, setInput] = useState(hasValue ? value : defaultValue)

    useEffect(

    function() {

    if (hasValue && input !== value) {

    setInput(value)

    }

    },

    [value]

    )

    let isOnComposition = false

    function handleChange(e) {

    setInput(e.target.value)

    if (isOnComposition) return

    onChange && onChange(e)

    }

    function handleComposition(e) {

    if ('compositionend' === e.type) {

    isOnComposition = false

    handleChange(e)

    } else {

    isOnComposition = true

    }

    if (flag !== isOnComposition) {

    setFlag(isOnComposition)

    }

    }

    let Component = Input

    if (key) {

    Component = Input[key]

    }

    return (

    {...props}

    value={hasValue && !flag ? value : input}

    onCompositionStart={handleComposition}

    onCompositionUpdate={handleComposition}

    onCompositionEnd={handleComposition}

    onChange={handleChange}

    />

    )

    }

    }

    const Component = function(props) {

    return BaseHOC()(props)

    }

    Component.Search = function(props) {

    return BaseHOC('Search')(props)

    }

    Component.TextArea = function(props) {

    return BaseHOC('TextArea')(props)

    }

    Component.Password = Input.Password

    Component.Group = Input.Group

    export default Component

    以上这篇在react项目中使用antd的form组件,动态设置input框的值就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    展开全文
  • 搜索框按回车 刷新了页面

    千次阅读 2012-02-09 10:20:54
    今天项目搜索框,敲击回车后,竟然刷新了页面,并没有跳转到想要的页面,后来发现是因为搜索框在一个form表单里面,action没有写url,相当于敲击回车响应了表单提交事件,所以$('#search input[name="k"]')....
    今天项目的搜索框,敲击回车后,竟然刷新了页面,并没有跳转到想要的页面,后来发现是因为搜索框在一个form表单里面,action没有写url,相当于敲击回车响应了表单提交事件,所以
    $('#search input[name="k"]').keydown(function(){
    				if(event.keyCode==13){
    					var name=$("#k").val();
    					 var url=base+'getSubjectsByName.action?name='+name;
    					 window.location.href=encodeURI(url);
    					
    				}
    
    			});

    并没有成功执行。改的办法是在keydown 里面加一个return false;就不响应表单提交事件了。

    $('#search input[name="k"]').keydown(function(){
    				if(event.keyCode==13){
    					var name=$("#k").val();
    					 var url=base+'getSubjectsByName.action?name='+name;
    					 window.location.href=encodeURI(url);
    					return false;
    				}
    
    			});


    展开全文
  • 部署好的项目在chrome中打开,出现了黑色边框。界面用的是elementUI,使用抽屉组件是出现了这种情况,其他的表单组件均正常 原因 通过搜索资料,确定是chrome浏览器本身问题。 资料显示这是最近chrome浏览器更新83...

    问题

    部署好的项目在chrome中打开,出现了黑色边框。界面用的是elementUI,使用抽屉组件是出现了这种情况,其他的表单组件均正常

    在这里插入图片描述

    原因

    通过搜索资料,确定是chrome浏览器本身问题。
    资料显示这是最近chrome浏览器更新83新版本产生的问题:
    Chrome83版本对表单控件进行了视觉效果的更新,当文本输入框处于焦点以及选定下拉菜单中的选项时,浏览器会在它们周围显示一个“黑框”,以突出表单中的这些内容。

    后来在CSDN上看见有个童鞋发帖说:这个问题已经反馈给了Google,在Chrome84 Dev中已经将该问题解决,按道理说等84版本更新后问题就会消失。
    然鹅…我去更新了84版本——
    在这里插入图片描述

    哎,黑框它还在…我们还是靠自己去解决吧~ - ~
    方法 ① :
    我们可以在每个表单控件的css样式中添加如下一行:

    outline:none;
    

    这行代码作用是去掉表单元素获取焦点后自动添加的边框.

    方法 ② :(不推荐)
    进入chrome浏览器的实验室界面修改相关设置。
    地址为:chrome://flags/#form-controls-refresh (当然用chrome打开)
    在这里插入图片描述

    进行如图设置,禁用掉 Web Platform Controls updated UI 这项更新,然后重启chrome即可。
    这个方法治标不治本,你无法修改客户打开网页所使用的浏览器。在其他电脑上仍会有问题。方法1才是真爱。
    本文章参考链接:https://blog.csdn.net/JZevin/article/details/107371372

    展开全文
  • 为了能够在github上搜索用户并查看其所有信息,他们所做的项目和个人资料。 输入 在搜索表单上输入您在github上使用的用户名。 输出 查看用户个人资料照片及其信息和个人资料。 使用的技术 它使用了
  • Bootstrap开源了首套 SVG 图标库 Bootstrap Icons,其团队表示这是有史以来第一次拥有自己的图标库,此图标库起初专门针对其从表单控件到导航等组件和文档进行定制设计和构建现在可以免费用于任何项目,无论此项目...
  • 点击保存之后,对表单进行了验证,导致之后请求的数据无法在更新到input中,也就是说即使在state中有值,也不会更新initialValue值,就导致搜索后的值不能正确填入input中,表单也就提交不了。 解决办法: 不使用...
  • 点击保存之后,对表单进行了验证,导致之后请求的数据无法在更新到input中,也就是说即使在state中有值,也不会更新initialValue值,就导致搜索后的值不能正确填入input中,表单也就提交不了。 解决办法: 不...
  • input按下enter键,触发搜索js

    千次阅读 2020-03-24 15:04:56
    项目紧急添加小功能:采用bootstrap写的前台界面,当form表单的input按下enter键时。之间进行搜索。 js function entersearch(){ var event = window.event || arguments.callee.caller.arguments[0]; if (event....
  • Vue + element 实现表单提交 分页实现 搜索实现 一、项目介绍 二、用到的技术 1、 vue+element 2、 vuex存储数据 3、 分页功能 搜索功能 4、 过滤器 生命周期理解 三、技术详解 1、vue+element 1.1 基础布局使用了 ...
  • 因此,在具体设计实现该博客网站时,主要考虑了主流博客网站的几个主要功能:(1)博客的注册、登录验证功能(2) 网络用户通过关键字搜索博文功能(3) 最热门博客页面推荐浏览(4) 文章详细内容及相关评论显示(5) 博客...
  • 注意: ...自定义指令,页面已下载,搜索框自动获取焦点 源代码 <div class="hello"> <label> Id: <input type="number" ...
  • 两个下拉列表联动已经会做了,现在想要点击“确定”后提交表单并在下面显示出数据库查询结果,但同时下拉列表不能刷新,保持选择的项目状态。目前点击按钮后会出现第二图的情况,恶心死我了。 我参考Shelley ...
  • 点击保存之后,对表单进行了验证,导致之后请求的数据无法在更新到input中,也就是说即使在state中有值,也不会更新initialValue值,就导致搜索后的值不能正确填入input中,表单也就提交不了。解决办法:不使用...
  • SnippetShare 项目总结连载(四)-- 让html:form表单处在一行Luo Weifeng 2011-6-25 说明:本系列文章为作者自己看或在web开发特别初级的人看,高手和中手绕过。 因为需要在tile框架的header那块做个很小的搜索,...
  • 单位 建设性质 项目编码 项目名称为es索引,搜索数据库筛选过滤条件。 时间插件只能选择年份,选择对应的年份会展示所有该年份的项目对应投资金额,并且会有汇总行,展示所欲查到的数据投资金额汇总 只要不选不选择...
  • 大家都知道,常见的连接数据库的目的就是增删...很简单第二步:创建项目:django-admin startproject projectname(项目名字),在cmd命令行里面进行。第三步:创建APP(应用): python manage.py startapp 应用名(在ma...
  • 一、总结: 今天项目中要给表单控件添加搜索选择的效果,如下: ...上面的代码实现出来的效果(类似百度搜索框)是,当用户在搜索框中输入查询条件,每当搜索框中的内容改变就会触发监听事件,并向服务器发...
  • 另外我去网上搜索了,java做进销存的应用,比php要多很多,那么是不是说明对于数学运算一些的应用,java强类型语言更有优势一些呢?而php流行的应用,多是互联网应用,以内容为主的,而不是数据为主的? 所以我...
  • Java开源 JEE框架

    2008-07-02 15:32:38
    输入您的搜索字词 提交搜索表单 Web www.open-open.com Web开发 Web开发框架 JSP标签 AJAX框架 服务器 应用服务器 Web服务器 开发工具 Eclipse插件 IDE 项目管理 Web测试工具 UML建模 ...
  • eladmin框架代码生成功能...查询方式:对应搜索框 关联字典:需要提前在字典配置中进行配置 注: 前端路径:如果手动复制到代码中,可随意填,不影响 3.将自动生成的代码,导入代码中(建议手动复制) 4.后端重.
  • 数据列表集成类似EXCEL的快速筛选、排序、模糊搜索、AJAX编辑等功能,表单页集成常用的文本、下拉框、单选、多选、关键词、编辑器、文件上传、图片上传、图片裁切等控件,除此之外,您还可以灵活的扩展自己的控件,...
  • Element-UI组件之表单Form

    千次阅读 2019-07-03 11:12:58
    Element-UI组件之表单FormRadio 单选基础用法禁用状态单选组按钮样式带有边框Checkbox 多选基础用法禁用状态多选组indeterminate 状态可选项目数量的限制按钮样式带有边框Input 输入框基础用法禁用状态可...
  • Gin-vue-admin是一个基于vue和gin开发的全栈前分离的后台管理系统,集成jwt鉴权,动态路由,动态菜单,casbin鉴权,表单生成器,代码生成器等功能,提供多种示例文件,让您把更多时间专注于业务开发上。 1.2贡献...
  • 数据列表集成类似EXCEL的快速筛选、排序、模糊搜索、AJAX编辑等功能,表单页集成常用的文本、下拉框、单选、多选、关键词、编辑器、文件上传、图片上传、图片裁切等控件,除此之外,您还可以灵活的扩展自己的控件,...

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 204
精华内容 81
关键字:

表单搜索框项目