ant design里Form表单遇到的一些问题

阿巴崽

已于 2023-06-14 10:46:03 修改

阅读量656

点赞数

文章标签：前端 javascript react

于 2023-06-14 10:18:59 首次发布

本文链接：https://blog.youkuaiyun.com/chou_kawaii/article/details/130636165

版权

在HTML中，<Input>标签不支持自动换行，可以使用<Input.TextArea>代替。通过设置autoSize属性，可以实现行数自动调整，例如设置minRows和maxRows分别定义最小和最大行数，同时可以使用disabled属性使文本域不可编辑。示例展示了如何展示订单支付金额和用户点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、对于文本框输入，想要自动换行并随行数自动增加行数

<Input>标签没有自动换行，可以使用文本域标签<Input.TextArea>

例如：

 <Input.TextArea
     disabled={true}//无法被选中和修改
     autoSize={{ minRows: 8, maxRows: 10 }}//最小行数，最大行数
     value="{0}：订单支付金额&#13;{1}：用户点击落地页"
 />

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阿巴崽

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

ant design Form 组件总结快速构建复杂Ant Design Form表单

cuandeqin2083的博客

07-28

2451

Ant Design Form Antd 表单的核心无非是以下两点表单创建（Form.create）在this.props写入form属性表单与组件的双向绑定（this.props.form.getFieldDecorator）表单的取值（this.props.form.validateFields / this.props.form.validateFieldsAndScroll）表...

Ant Design 中 input 无法输入的问题

ErikChan的博客

02-21

8762

Ant Design 是阿里巴巴开发的一套企业级 UI 设计语言和 React 组件库，极大地提高了前端开发人员的开发效率。在我的开发过程中，使用过 ant design 中的 input 组件，遇到了 input 框无法输入的问题。错误示例 <input className='input_obj' onChange={} value="test"> </input> 在浏览器中打开，在 input 框中输入数据时, 发现内容一致都不变，内容都为 test，如同被禁止修改

参与评论您还未登录，请先登录后发表或查看评论

react antd TextArea 中文输入法 autoSize

HackerDreamer_BSD的博客

05-19

957

autoSize 引起的 textArea的中文输入问题

antd表格宽度超出屏幕，列宽自适应失效

six66667的博客

10-14

1787

Table用的好好的，可就有一个页面的表格显示不全，超出浏览器宽，设定表格宽度也没用。最终发现是因为url地址被当做一个英文单词，而一个单词除非里面有连字符，是默认不换行的，中文没有这个问题。

ant desigen表单的label文字过长，怎么换行？

华唐的博客

07-07

1万+

背景：今日负责公司的项目的国际化，到目前已经完成，但是发现替换成英文后，form的一些英文的label变得很长被遮挡样式：解决办法：要是想在全局解决就使用组件的样式覆盖代码如下： .ant-form-item-label { display: flex; justify-content: flex-end; line-height: 16px; //这个数值视具体情况而定 label { //这是关键 .

Vue解决中文化报错: [antdv: LocaleProvider] `LocaleProvider` is deprecated. Please use `locale` with...

ALSO666的博客

12-22

2417

这里写目录标题问题描述出现原因解决方案问题描述在使用 antdv 进行中文化的时候报错：Warning: [antdv: LocaleProvider] 'LocaleProvider' is deprecated. Please use 'locale' with 'ConfigProvider' instead。出现原因在使用ant-design-for-vue国际化的时候，LocaleProvider已弃用，需要换成 ConfigProvider。解决方案在App.vue页面，把

基于vue Ant-Design 的表单设计器.zip

12-26

Vue.js Ant-Design 表单设计器是一个强大的工具，它允许开发者在Vue项目中快速构建复杂的动态表单。这个工具结合了Vue.js的响应式特性和Ant Design的优美UI组件库，为开发人员提供了一种高效、灵活的表单设计解决...

解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题

01-18

场景描述： ... 减免天数 visible={that.state.visible} xss=removed xss=removed> <Form horizontal form={form}> <FormItem {...{labelCol: { span: 5 }, wrapperCol: { span: 16 }

ant-design-vue3.x的form表单爬坑.pdf

12-16

在Ant Design Vue 3.x版本中，表单的使用与之前版本有了一些显著的变化，特别是对于嵌套表单的处理和验证方式。本文将详细解析这些变化，帮助开发者避免在升级过程中遇到的“坑”。首先，让我们关注的是嵌套表单...

Ant Design Vue-Table报错：warning.js?2149:7

Robert_c

08-06

3170

今儿使用蚂蚁组件库的table时，遇到个问题：warning.js?2149:7 Warning: [antdv: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.] 。记录一下这是因为columns中定义的默认key值在返回的数据中没有当前的这个字段造成的，一个是使用rowKey默认指定一个对应的键值对，或者使用类似v-for循环中的下标index来代替

react中使用antd的过程即踩坑（警告信息）

11-13

2万+

1.在使用react-antd,Table组件时报警告，虽然不影响效果但是，对于强迫症的人来说是无法接受的。 react-dom.development.js?cada:506 Warning: Encountered two children with the same key, `null`. Keys should be unique so that components maintain...

input标签能换行么？textarea标签属性

qq_44721998的博客

09-19

1万+

input标签不能换行！！！！想做文本框并且要换行的话用textarea标签就行，并且可以实现自动换行，不需要另加属性。

textarea 手机端无法换行_关于textarea提交的内容无法换行的解决办法

weixin_39588104的博客

12-19

448

当我们在页面上通过 textarea 提交数据的时候，我们我们输入的内容在提交后都会被处理为了一段内容，即使我们在 textarea 里面输入了很多的换行，提交后也是一段内容，那如果我们需要将我们输入的信息按照输入的形式保存下来该如何做呢？这里面存在一个主要的问题是在页面显示的时候换行符是标签，而内容在 textarea 中显示时的换行符是 n ，下面介绍一种方法通过 js 将输入的内容中的换...

form表单不换行

flymoringbird的博客

01-21

8960

style="margin:0px;display:inline;">

antd中的input和select常用属性整理

hole_diss的博客

11-20

735

表单中input和select是使用频率最高的两个输入控件

Vue2版本的antdv给textArea添加限制输入长度，并实时显示已输入字数

vivi____的博客

11-14

4486

Vue2版本的antdv给textArea添加限制输入长度，并实时显示已输入字数

Autosize插件允许textarea元素根据录入的内容自动调整元素的高度

diaosheng8387的博客

12-22

830

jquery.autosize.js Autosize插件允许textarea元素根据录入的内容自动调整元素的高度。 // Example:$(document).ready(function(){$('textarea').autosize();}); 转载于:https://www.cnblogs.com/anyaran/p/4177698.html...

Antd 使用时的一些小错误汇总（持续更新）

eswang的优快云博客

10-20

2927

貌似是因为React版本的变迁，使用antd时会出现很多莫名其妙的小错误，这里汇总一下，目前正在用Antd+React+Nest.js+MongoDB写自己的博客，优快云更新速度会放缓，这月目标是写40篇左右吧. 首先是使用Antd组件时出现的错误，不出意外的话应该是Menu组件： index.js:1 Warning: Function components cannot be give...

ant design mini form表单

最新发布

03-03

### 关于 Ant Design Mini 表单的使用 #### 安装与配置为了在支付宝小程序中使用 Ant Design 的迷你版表单组件，需先安装 `ant-design-mini` 库。可以通过 npm 或者 yarn 来完成依赖包的安装[^1]。 ```bash npm install @antmjs/vantui --save ``` 或者 ```bash yarn add @antmjs/vantui ``` 需要注意的是，上述命令中的包名基于最新文档更新，具体到 `ant-design-mini` 可能有所不同，请参照官方 GitHub 仓库获取最准确的信息。 #### 创建简单的表单实例下面是一个简单的小程序页面代码片段，展示了如何创建一个包含输入框、选择器和按钮的基础表单： ```html <template> <view class="container">  <input type="text" placeholder="请输入用户名..." v-model="formData.username"/>  <picker mode="selector" range="{{array}}" value="{{index}}" bindchange="bindPickerChange"> <view class="picker">当前选择：{{array[index]}}</view> </picker>  <button type="primary" bindtap="submitForm">提交</button> </view> </template> <script> export default { data() { return { formData: { username: '' }, array: ['选项一', '选项二'], index: 0, }; }, methods: { submitForm(e) { console.log('form submitted:', this.formData); }, bindPickerChange(e) { this.setData({ index: e.detail.value }); } } } </script> ``` 此段代码实现了基本的用户交互逻辑，包括文本输入、选项选取以及表单提交事件处理[^3]。 #### 验证机制集成对于更复杂的业务需求来说，在前端加入验证规则是非常必要的。可以利用框架自带的功能来设置字段级联关系或是条件判断式的检验方式。例如，当某个特定条件下才启用某些控件的有效性检查等高级特性[^4]。 #### 动态管理表单项除了静态定义外，还可以考虑支持动态增删表单项的能力。这通常涉及到状态管理和DOM操作技巧的应用。比如借助 Redux 进行全局状态同步维护；或者是单纯依靠 Vue/React 组件化思维下的局部重构策略实现相同目的[^5]。