ant design 中 input 无法输入的问题_antd input无法输入-csdn博客知识图谱

ant design 中 input 无法输入的问题_antd input无法输入-csdn博客

本站和网页 https://blog.csdn.net/jiaming917/article/details/123047511 的作者无关，不对其内容负责。快照谨为网络故障时之索引，不代表被搜索网站的即时页面。

Ant Design 中 input 无法输入的问题_antd input无法输入-CSDN博客
Ant Design 中 input 无法输入的问题
最新推荐文章于 2024-04-25 22:22:41 发布
ErikChan.hk 阅读量7.5k 收藏 4 点赞数 1 分类专栏： React 文章标签： react.js 前端 reactjs
版权声明：本文为博主原创文章，遵循
CC 4.0 BY-SA
版权协议，转载请附上原文出处链接和本声明。
本文链接：
https://blog.csdn.net/jiaming917/article/details/123047511
版权
专栏收录该内容
3 篇文章
0 订阅
订阅专栏
Ant Design 是阿里巴巴开发的一套企业级 UI 设计语言和 React 组件库， 极大地提高了前端开发人员的开发效率。
在我的开发过程中，使用过 ant design 中的
input
组件，遇到了 input 框无法输入的问题。
错误示例
<
className
=
'
input_obj
onChange
{}
value
"
test
>
</
在浏览器中打开，在 input 框中输入数据时, 发现内容一致都不变，内容都为 test， 如同被禁止修改一样。
原因是因为在 ant design 中，input 组件的 value 属性赋值后, input 的值会一直保持 value ， 修改后仍然会被重新赋值为 value。
正确示例
defaultValue
将 value 修改成 defaultValue, 默认值可以被修改
友情提示
使用 defaultValue 可能也会有一些问题，如果遇到的，可以在评论区留言哦。
优惠劵
关注
点赞
觉得还不错?
一键收藏
知道了
评论
Ant Design 是阿里巴巴开发的一套企业级 UI 设计语言和 React 组件库，极大地提高了前端开发人员的开发效率。在我的开发过程中，使用过 ant design 中的 input 组件，遇到了 input 框无法输入的问题。错误示例&lt;input className='input_obj' onChange={} value="test"&gt; &lt;/input&gt;在浏览器中打开，在 input 框中输入数据时,
发现内容一致都不变，内容都为 test，如同被禁止修改
复制链接
扫一扫
专栏目录
Ant
Design
框架-其他
06-11

是阿里开源的一套企业级的 UI 设计语言和
实现，使用 TypeScript 构建，提供完整的类型定义文件，自带提炼自企业级
后台产品的交互语言和视觉风格、开箱即用的高质量
组件与全链路开发和设计工具体系。 特性：提炼自企业级
后台产品的交互语言和视觉风格。开箱即用的高质量
组件。使用 TypeScript 开发，提供完整的类型定义文件。全链路开发和设计工具体系。数十个国际化语言支持。深入每个细节的主题定制能力。 兼容环境：现代浏览器和 IE11（需要 polyfills）。支持服务端渲染。Electron 
更新日志：v4.16.0重构 Menu，支持键盘操作以及无障碍体验优化。重新设计 Table 筛选和排序按钮的位置，使其归属列更明确。Table  Table.Summary 支持 sticky 模式。  修复有固定列的 Table 内嵌 Table 的额外边距丢失的
问题
。  Table 新增 expandable.fixed 属性用于设置扩展图标固定。Upload  Upload 组件 itemRender 添加 actions 调用参数。  Upload 从拖动事件
删除 stopPropagation，并添加onDrop 回调。Typography  Typography 增加斜体字支持。  修复 Typography 配置 ellipsis={{ suffix: 'xxx' }} 时换行闪动
。Collapse  修复 Collapse 不指定 header 时箭头错位的
。  修复 Collapse 隐藏时设置 activeKey 时内容会消失的
。修复 Menu.SubMenu 的 icon 设置为第三方 icon 库时的样式
。修复 Descriptions 单独引入样式丢失的
。Radio.Group 支持 data-* 和 aria-* 属性。Statistic.CountDown 组件增加 onChange 事件。PageHeader 的 breadcrumb
允许设置为组件。ConfigProvider 支持动态设置 prefixCls。修复 Anchor 指定 getCurrentAnchor 后
无法
触发 onChange 的
。修复 Notification useNotification 生成的通知框 className 作用范围不一致的
。修复 Tabs tabBarGutter 属性失效的
。#30545改写 Space 使用 flexGap 以代替 margin 样式以处理某些边界情况下的布局
。修复 Form 校验错误状态下
Input
.Group 和 Cascader 边框颜色错误。国际化  补充罗马尼亚语国际化。  补充荷兰语（荷兰 netherlands）及荷兰语（比利时 belgium）国际化。TypeScript  Space TypeScript 定义支持 HTMLAttribute 属性。
解决
输入
框在
法下的bug
weixin_44354236的博客
04-14
2536
需求：封装
组件，
拼音过程
不触发onChange，拼音
结束后触发onChange
原理：
标签上面有两个事件，就像他的生命周期， compositionstart事件只有在
文时才会触发，触发事件在inpit 事件之前，compositionend表示结束
时触发的事件，不管
最后是不是
文都会触发
组件
import
from '
react
';
import {
} from
参与评论
您还未登录，请先
登录
后发表或查看评论
不了信息
Codernmx
11-05
868
我看了下
不了的网页结构
发现好像是有个啥东西遮住了样。。
结果发现，是因为后边那一个没有指定 span 导致他所占宽度为一整行了，也就覆盖了前边的
两个
框，导致
不了信息。
解决：给后边的也设置上span
...
antd
无效
qq_44688392的博客
07-23
4377
无效，，
只因给
框加了float:left,导致
，绝了。。。。。。搞了好久
Modal内嵌Form表单initialValue值不动态更新
01-18
场景描述：
如下图所示，点击减免天数会出现一个弹窗，
天数后点击确定，保存这个值，但是我在点第二行的减免天数的时候初始应该是空的，可是现在显示的是第一行
的值；
<Form horizontal form={form}>
<FormItem {...{labelCol: { span: 5 }, wrapperCol: { span: 16 }
modal弹窗
引入form表单组件
weixin_39759137的博客
08-31
1845
resetFields() 表单重置方法会把form表单下v-modal绑定的值过滤一次，如果发现undefined的值，则会清空绑定，所以导致
双向绑定
无效。
唠一唠
的坑之
内容的几种情况
热门推荐
zzh的博客
03-20
1万+
1，
框设置了readonly属性
type="text" name="name" value="123" readonly="readonly" />
readonly 属性规定
字段为只读,不可以修改但是可以复制。
2，
框自身设置font-size为0
type="text"
style="font-size: 0px;wi...
v Select dropdownRender
不能
WangYan的博客
07-26
833
小说明：外层 div click 事件触发select开启，然后 slot 内部 div 利用 mouseleave 属性，模拟出select 的失焦 blur 事件。简言之：外层套div，然后利用Select的open属性。
vue
zsm__zsm的博客
03-31
1278
ant
design
vue 的
组件不能
但可以选择
m0_60666754的博客
01-09
620
1.如下图，设置了只读性，只能选择放大镜，但不能
文字（readOnly ）注意：readOnly 的O要大写。
Search
内容的
01-21
我的
：今天先根据手机号查询一个用户，根据文档引用
的Search，我添加了一个样式，发现
内容，
代码：
return (
this.findAppUserByPhoneNo(value)}
onChange={this.onChangePhoneNo}
value={searchText}
enterButto
Android实现
自定义表单组件
08-30
组件提供了
Number，Radio，Select，uplod等表单组件,下面通过本文给大家详细介绍Android实现
自定义表单组件，需要的的朋友参考下吧
vue 的组件禁用属性 disabled.pdf
12-16
vue 的组件禁用属性 disabled
Vue 添加区分
英文的长度校验功能
原本的maxLength属性是不区分全角/半角字符的，对于一些可
英文混合
地方而言不太合适。所以想找一个可区分全角/半角字符的校验，而且要保证一定的可重用性。
百度搜了一圈都没找到合适的现成的解决方案，所以自己试着基于v-decorator的自定义校验validator实现了一下，核心代码如下：
校验插件
const validators = {
/**
* 可区分全角字符/半角字符的长度校验。
* @param min
* @param max
* @returns {Function}
*/
length({min=0,max=100000000}){
return
基础知识大汇总
qq_36828822的博客
04-21
857
如果在多个组件
使用了相同的useEffect或useState逻辑，推荐将这些相同的逻辑封装到函数
，这些函数被称为自定义的Hooks。下面举例3个自定义的Hooks的示例。useForceUpdate：返回一个让组件重新渲染的函数。// 调用 forceUpdate 函数来强制组件重新渲染usePrevVal：获取状态的上一次的值，它利用了Ref的可变性，以及effect在DOM被绘制到屏幕上才执行的特性。
Router】快速使用
小秀的博客
04-22
401
Outlet：相当于 Vue Router 的 router-view；需要有嵌套 ROute 或者 useRoutes
使用children 属性的配置，children 对应一个数组，数组里是一个个路由。NavLink：和 Link 一样会被渲染为 a 标签，和 Link 的区别是他有一个名为 active 的激活样式，所以一般用于顶部或者左侧导航栏的跳转。Navigate：重定向，类似于 useNavigate 的返回值函数，但这个是组件。Route：书写对应的路由和对应的组件。
】Sigma.
js
框架网络图-入门篇
无限循环
04-20
311
Sigma.
它使在Web页面上发布网络变得容易，并允许开发人员将网络探索集成到丰富的Web应用程序
。Sigma.
提供了许多内置功能，例如Canvas和WebGL渲染器或鼠标和触摸支持，以使用户在网页上的网络操作流畅且快速。通过使用Sigma.
，用户可以方便地创建和展示网络图，从而更好地理解和分析数据之间的关系。
父组件调用子组件的属性或方法
weixin_42289080的博客
04-19
318
的父组件调用子组件的属性或方法，通过三个api实现
[集群聊天项目] muduo网络库
最新发布
一个愚蠢的研究牲
04-25
405
muduo网络库的使用
禁止
空格
06-09
您可以监听 `
` 事件，在事件处理函数
检查
的内容是否包含空格，如果包含则将空格删除掉。下面是一个示例代码：
```vue
<template>
<a-
v-model="
Value" @
="handle
"></a-
</template>
<script>
export default {
data() {
return {
Value: ''
};
},
methods: {
handle
(e) {
// 检查
的内容是否包含空格
if (/\s/.test(e.target.value)) {
// 如果包含空格则将空格删除掉
this.
Value = e.target.value.replace(/\s/g, '');
</script>
```
在上面的代码
，我们使用了正则表达式来检查
的内容是否包含空格。如果包含，我们使用 `replace` 方法将空格删除掉，然后将处理后的值赋给 `
Value`，这样就可以禁止
空格了。
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
CSDN认证博客专家
CSDN认证企业博客
码龄9年
暂无认证
82
原创
5万+
周排名
19万+
总排名
14万+
访问
等级
1672
积分
50
粉丝
65
获赞
25
204
私信
热门文章
el-input 不能输入的解决办法
24455
Python中如何使用boolean类型的数据
12490
Python实现用户登录账户
11934
7564
如何解决'chromedriver' executable needs to be in PATH.的问题
6192
分类专栏
RT-Thread
1篇
node
Vue
5篇
3篇
GoLang
Java
Python
27篇
vscode
7篇
Electron
Git
Linux
6篇
UniApp
Django
Eclipse插件开发
9篇
嵌入式操作系统
2篇
安卓
数据库
爬虫
工作效率
数据分析
读书日记
电影
最新评论
xxxxxxxxxh_:
加了v-model就可以了，谢谢！
qq_41547756:
el-cascader-panel 插槽里使用el-input这三种方法都解决不了怎么办呢
React 国际化
、不知不觉、:
如果没有默认语言值，需要通过api获取，获取到之前怎么优化显示的文本呢？
【Python】文件操作 r+ 的问题
bunengxie:
可以使用w+，w+模式会先清空原有内容，再写入
Afgk_wyp:
是不是表单里没写字段在data return里添加相应的字段就能输入了
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
最新文章
RT-Thread Smart 用户态开发体验
Object.defineProperty和Proxy
github 中使用 ssh
2023年
2022年
2021年
18篇
2020年
2019年
38篇
2018年
15篇
2016年
目录
被折叠的 
 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
祝福语
请填写红包祝福语或标题
红包数量
红包个数最小为10个
红包总金额
红包金额最低5元
余额支付
当前余额
3.43
前往充值 >
需支付：
10.00
取消
确定
下一步
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝
规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。
余额充值