Antd中，Form和Select联合使用，导致placeholder不生效

最新推荐文章于 2023-11-15 15:07:10 发布
最新推荐文章于 2023-11-15 15:07:10 发布
阅读量699 收藏
点赞数
分类专栏： react+antd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45024541/article/details/105371728
版权

在使用antd的form组件时候，需要对Select组件进行语体示，placeholder，但是写的值并不生效
在这里插入图片描述
效果如下，并没有生效
在这里插入图片描述
经检测发现，传入的state中的初始值为空，但组件需要传递的是undefined，所以给state中的初始值设为undefined即可或
在这里插入图片描述

我排着队拿着前端号码牌
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
antd-design Form，Select联合使用 placeholder 不起作用问题
w候人兮猗
04-26 3757
antd-design Form，Select联合使用 placeholder 不起作用问题 起因 最近在用antd写表单的时候遇到个问题:Form,Select组件一起使用时,设置Select组件的placeholder属性并没有起作用。如下图： 发现Select组件的placeholder属性并没有起作用。 排查 对照官方文档看了一下官方的代码 <Form.Item ...
在antd Form表单中select设置初始值操作
01-18
我就废话不多说了，大家还是直接看代码吧~ <Form.Item label=作用对象> {getFieldDecorator('targetId', { initial...Select placeholder=请选择作用对象> {targetList.map(entity => <Option key={enti
使用antd的form回显或者设置表单数据时，select的placeholder不显示的问题
weixin_45746180的博客
09-24 1352
使用antd的form回显或者设置表单数据时，select的placeholder不显示的问题 例如： <Form {...layout}> <Form.Item > {getFieldDecorator('id', { initialValue: hostId !== '' ? hostId : '' })( <Select placeholder={'请输入
解决Antd 里面的select 选择框联动触发的问题
01-22
有两个 select框，且这俩select框是关联的，触发select1，select2里面才会有值。 但是现在的问题是这样的： 触发select1，触发select2，再触发select1，此时select2里面的值变成了上次一选中的value 值，而不会被清空。 解决办法： 使用Select 里面的value属性，来进行清空 <Form style={{padding:'20px','boxSizing':'border-box'}}> <Select defaultValue={packag
【ant design of vue】form下select的placeholder不起作用
sunshine641的博客
08-13 981
图中代码呈现的下拉框，无默认提示，即placeholder内容不显示 尝试了很多方法，总结一下几种情况： 1、组件内部大概把除了undefined的值 都当作有value 所以不显示placeholder了 把组件中， gunCharge的初始值设置为undefined，之前设置为‘’，出错。 （当select的value绑定一个state默认值时，如果默认值是''或null时，placeholder不生效 解决方案：默认值设为undefined，从别处粘来的，大概一个意思） 参考：https
antd 踩坑之select的placeholder不显示问题
热门推荐
卡卡罗特的博客
05-13 1万+
在antd中 使用form去回显或者新增表单数据时，select的placeholder不显示 如下例子：新增的时候，默认地址是空 “” 或者 null, 都不好使 <FormItem label="所属网点" {...formItemLayout} > {getFieldDecorator("bankId", { initialValue: this.props.type=== "edit
antd select的placeholder不显示问题
fhdjdfhjd的博客
03-02 1189
antd select的placeholder不显示问题
解决antd的Form组件setFieldsValue的警告问题
01-21
记住：setFieldsValue的字段要对应得...在使用setFieldsValue给表单Form的某一个filed赋值时，可能掺杂了非表单控件中的字段，Form表单在赋值和渲染时发现有些字段无法渲染在现有的字段（因为不存在），所以就会报出这
在antd4.0中Form使用initialValue操作
01-18
然后我在网上看用resetFields()这个方法，每次提交或者取消之后重置一下数据，然而我试了还是不得行，会变成每次点击显示的是上一次的数据，所以后面还是老老实实看了一下form的其他方法。 贴个图 解决 放弃initial...
antd form 封装可搜索可输入select
最新发布
03-29
antd form 封装可搜索可输入select
在antd中setFieldsValue和defaultVal的用法
01-18
this.props.form.setFieldsValue({ phone: this.props.maintain.account.phone, email: this.props.maintain.account.email }); console.log(this.props.form.setFieldsValue); } 打印出来 function ...
Antd Design 的 from,select 使用 placeholder不好使原因
shylock的可爱博客
12-17 242
Antd Design 的 from,select 使用 placeholder不好使原因 昨天做react的项目时，新增会议室选楼层的时候，发现placeholder不生效，试了好多遍都是空的不显示 代码是这样写的，咋看咋没错，去官网上也没找到合理解释 <Row> <Col> <Form.Item name="name" label="楼层"> {getFieldDe
React项目中使用 Ant Design - form实现简单Select 下拉多级联动
z611739的博客
11-15 2203
React项目中使用 Ant Design - form实现简单Select 下拉多级联动可接受form控制
Antd中 Select中在placeholder不生效
你，若盛开的专栏
12-28 1069
当给Select中value赋值后，placeholder会失效，最有效的方法： 没有值时value设值为undefined的是时候，placeholder就好啦
解决antd select选择器placeholder不生效
gz-郭小敏的博客
12-10 670
解决antd select选择器placeholder不生效
Antd中，Select 中value设值，导致placeholder不生效解决方法
weixin_38170065的博客
08-22 2082
<Select key="sm2" placeholder="姓名" showSearch={true} allowClear={true} showArrow={false} value={this.state.selectvalue} > ...
AntDesign的select组件placeholder不显示问题
upup
10-10 2387
如下，select组件同时绑定了v-model和placeholder，当v-model绑定data中属性为空时，select绑定的placeholder属性不显示。 <a-select v-model="level" placeholder="选择日志级别" style="width: 250px" allow-clear> <a-select-option value="info">一般</a-select-option>
antd-form表单 联动触发规则校验
weixin_53110831的博客
12-10 4097
antd-form表单 如何联动触发规则校验。
antd Form 表单 Form.List 通过select动态控制显示内容
m0_64303519的博客
12-20 5466
点击加减能够动态的添加表单,这个antd文档中有我就不说了 选择第一个下拉选择器, 根据第一个的内容控制后面显示输入框还是下拉选择, 代码如下: 重点就是最外层的: <Form.Item shouldUpdate>{() => ()}</Form.Item> <Form.Item shouldUpdate noStyle> {() => ( <Form.L
antd form 和upload使用
05-17
其中包括Form和Upload组件，下面是它们的使用方法。 ## Form Form组件用于创建表单，可以非常方便地实现表单的数据绑定、验证和提交等功能。 ```javascript import { Form, Input, Button } from 'antd'; const ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值