react+antd输入框值想在点击清空按钮的时候清空怎么办()

最新推荐文章于 2022-07-29 16:51:54 发布
最新推荐文章于 2022-07-29 16:51:54 发布
阅读量7.3k 收藏 3
点赞数 1
分类专栏： study progress 文章标签： react dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDN_smartyang/article/details/108870614
版权

废话不多说先上一版解决办法

clear(){
   
	this.refs.myInput.state.value = '';
}
<Search size="large" defaultValue="" style={
   {
    width: 400 }} ref="myInput" />
<Button onClick
最低0.47元/天 解锁文章
Dawn_pre
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
antd input select 清空问题解决
起步程序媛的博客
05-16 1万+
antd input select 一键清空input select清空form中的input select清空input select清空无效？ antd input select 一键清空 react+antd开发的内部管理系统，以表格，表单为主，页面多，开发人员多，开发风格不统一，需要为有多个查询条件的页面提供一键清空功能，奈何antd input，select有allowClear的属性却没有提供清空的方法，时间紧，最后决定使用jquery自动触发清空x 的方式进行 input select清空
React绑定antd输入框，点击清空或者确定按钮实现清空输入框内容
最新发布
08-25 2267
其实实现原理和vue的双向绑定是一样的，就是监听输入框的onChange事件，绑定value值，当输入框内容发生变化后，就重新设置这个value值。示例代码：我这里是统一在handleCancel这个函数里面处理清空逻辑了，你们可以自行调整。
【React】【Ant Design】解决React中使用Antd输入框，点击按钮清空输入框内容的问题
是光の谢宣骞博客
07-29 4108
实用案例！
antd 中 清空Input组件中的值，不是通过form.setFiledValue的方式，非受控组件清空值
业余前端的职业经历
06-14 7817
最近做了一个业务就是在输入框中处理防抖的业务，本来就可以，测试小姐姐说要 加个按钮可以 清空下 输入框中的值。 我想了想 本来想直接搞一个 state状态值 然后直接 setState方式清空呢 发现根本不行 因为防抖触发的就是异步的 导致 连输入内容都不行。 其实 这个时候 我就想到了 要用 form组件的 setFieldValue的形式 进行处理 但是那样的话 我好想很大部分要重写了，不想这么大动干戈哎 后来就想了想 原生的非受控组件 可以直接通过dom操作清空输入框中的值 我先试试看 好像不太行
antd-vue 清除form表单里input值
StriplingLee的博客
06-10 1649
antd-vue 清除form表单里input值 // 清除input值 this.form.setFieldsValue({'inputCode':""})//inputCode就是表单里Input的值，第二个""为所需要空值
react之antd Design Input输入框value值清除及弹窗时自动获取焦点
热门推荐
qq_38734862的博客
04-19 1万+
正常我们使用输入框、选择器等都是结合表单来使用的，但是这次我就需要一个输入框来切换到编辑状态，那这样用表单当然肯定也是可以的，但是我觉得不完美，就单独的使用input组件，但是遇到了两个问题：输入框内容清除、自动获取焦点。然后我就把输入框单独拎出来来进行重现这两个问题，并想办法解决。单独测试的代码=》codesandbox在线测试传送门 输入框内容清除 输入框显示默认值的话首先想到的就是 ...
react+antd搭建后台管理框架
05-20
react+antd搭建前端管理框架（***支持响应式***），主要模块分为：菜单、选项卡、面包屑；通过路由监听，实现三个模块之间的联动（同时监听浏览器）；状态采用react-redux进行集中管理。目前只包含前端代码，未与...
React+antd后台管理系统模板
12-01
基于React+antd写了一个后台管理模板。主要是熟悉antd组件和React，页面主要还是展示页面,比较简单不涉及后台交互的系统模板Demo
react+antd+redux实现的一个超全后台管理系统
10-12
该后台管理系统模板参照了vue-element-admin进行开发，包含动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。
react-antd-admin:react + ts + antd实现的管理系统模版
03-11
react-antd-admin 基于react + ts + antd建立的管理后台脚手架模版 线上地址 git地址 单独使用 详情请查看 1.配置抽屉 1-1。可缓存系统配置 记录用户使用的系统配置，缓存浏览器中，记录用户习惯。 1-2.antd换肤...
react-antd-ts-admin:react + antd + typescript的后台管理系统
03-11
项目简介基于React+AntD+TypeScript的后台管理系统技术依赖React-（UI框架） 蚂蚁设计-（组件库） TypeScript-（静态类型） Webpack 轴距较少的功能登录/退出全屏浏览一键换肤个人中心侧边菜单标签快捷导航图标表单...
input组件未在Form内，清空输入数据
马优晨
07-17 5960
默认天数是0 输入数字 输入错误格式 输入大于10000天数 正确输入点击保存，清空输入框里面的值 对于上面的输入框，整个页面只有一个输入框，所有没有采用antd Form表单的形式，直接使用了 input的值来操作。 代码如下： import React, { PropTypes } from 'react'; import { Link } from 'rea...
关于react里的 img导入svg图片在线上不能正常显示的问题
csdn_smartyang的博客
02-01 2501
一般我们会在webpack里配置 但是我遇到配置完也不能在线上正常显示，这里已经找不出其他原因，但是png能够显示，所以我考虑到换成png，但是放大会模糊，这也是这个的缺点，于是我只好转成base64去显示 可以在线上手动转换后引入 https://base64.guru/converter/encode/image/svg <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4K
react 实现点击元素外隐藏元素的功能（react判断点击位置是否为组件内,实现点击外部触发组件内事件）
csdn_smartyang的博客
11-02 2020
遇到问题先百度，但是最近发现百度的内容好多都老旧了，跟不上时代，本文基于https://www.cnblogs.com/ives/p/11291769.html的内容上进行完善和补充 为什么说它旧了呢，因为在新版的react中这个已经 ref="refTest"已经废弃可以参考之前的这篇文章 react 中如何清空input的值 import React, {Component} from 'react'; import {findDOMNode} from 'react-dom' export de
把后端返回的json数据格式化显示在页面上，类似json.cn
csdn_smartyang的博客
09-30 1984
今天老大提了一个需求，想要做一个按钮点击后出现一个类似于json.cn代码格式化,把后端返回给你的一个json数据格式化以后显示在页面上，经高人指点知道了这样一个jsoneditor模块 一.介绍 JSON编辑器是基于Web的工具，用于查看，编辑，格式化和验证JSON。 它具有多种模式，例如树编辑器，代码编辑器和纯文本编辑器。 该编辑器可以用作您自己的Web应用程序中的组件。 该库可以作为CommonJS模块，AMD模块或常规javascript文件加载。 支持的浏览器：Chrome，Firefox，Saf
js方法去掉输入的特殊符号(包括空格)
csdn_smartyang的博客
09-29 1609
js方法去掉输入的特殊符号包括空格 function b(s) { var pattern = new RegExp("[` ~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]") var rs = ""; for (var i = 0; i < s.length; i++) { rs = rs+s.substr(i, 1).replace(pattern, ''); } return rs; } .
vscode的 Eslint代码自动格式化
csdn_smartyang的博客
09-30 1260
在生产开发过程中企业一般要求我们开Eslint，目的是为了提高代码的可读性和规范性便于在你离职后代码能让别人接手， 第一步 第二步 preferences找到Setting文件夹 第三步插入以下代码并阅读一下即可 { // #值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按shift+alt+F "editor.formatOnSave": true, //设置tab的缩进为2 "editor.tabSize": 2, // #每
vue3.0都支持ES6了，你还对前端新特性没有了解吗？(一)
csdn_smartyang的博客
08-24 1203
在面试过程中我们经常被问道你知道ES5,ES6有哪些新特性吗?你知道HTML5的新特性吗？ ok,今天乘着我学习总结的这个机会，主要是为我自己总结一下这些新特性，欢迎留言指教(注意本文并不全面) HTML5新特性 首先就是近俩年小伙伴发现的，暧!怎么最近不见FLASH插件了，浏览网页可以用HTML5播放器了，没错了，这个就是新特性之一 1.1 视频格式 浏览器支持的视频格式有：MP4、WebM、OGG 浏览器 MP4 WebM OGG Internet Explorer Yes NO NO
react+antd清空表单
05-30
在React中，清空表单可以通过Antd的Form组件提供的`resetFields`方法来实现。具体步骤如下： 1. 在表单的父组件中引入`Form`组件，并将表单的所有控件都用`Form.Item`包裹起来，每个`Form.Item`需要设置`name`属性，这个属性值需要与`getFieldDecorator`方法中的`id`参数保持一致。 ```jsx import { Form, Input, Button } from 'antd'; class MyForm extends React.Component { render() { const { getFieldDecorator } = this.props.form; return ( <Form> <Form.Item label="用户名" name="username"> {getFieldDecorator('username')(<Input />)} </Form.Item> <Form.Item label="密码" name="password"> {getFieldDecorator('password')(<Input.Password />)} </Form.Item> <Form.Item> <Button type="primary" onClick={this.handleSubmit}>提交</Button> <Button onClick={this.handleReset}>重置</Button> </Form.Item> </Form> ); } } ``` 2. 在表单的父组件中定义`handleSubmit`和`handleReset`方法。`handleSubmit`方法用于提交表单，`handleReset`方法用于清空表单。 ```jsx class MyForm extends React.Component { handleSubmit = e => { e.preventDefault(); this.props.form.validateFields((err, values) => { if (!err) { console.log('Received values of form: ', values); } }); }; handleReset = () => { this.props.form.resetFields(); }; render() { //... } } ``` 3. 在表单的父组件中将`MyForm`组件包裹在`Form.create`函数中，生成一个新的高阶组件，并将其导出。 ```jsx const WrappedMyForm = Form.create({ name: 'my_form' })(MyForm); export default WrappedMyForm; ``` 这样，当用户点击表单中的“重置”按钮时，表单中的所有控件都会被清空。如果想要清空表单中的某一个控件，可以通过`setFieldsValue`方法来清空，具体可见前面的回答。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值