React中使用antd的Select不显示placeholder的问题解决

最新推荐文章于 2023-08-23 23:32:40 发布
最新推荐文章于 2023-08-23 23:32:40 发布
阅读量1.1k 收藏 3
点赞数
分类专栏： React教程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GaoXiR/article/details/108455781
版权 
<Select  value={class? class: undefined} placeholder={"请选择班级"} 
open={false} onClick={this.orgTreeViewOnChange}></Select>

当class为空的时候设置value的值为undefined，此时就会显示placeholder中的提示信息。

手写的从前98
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
antd select的placeholder不显示问题
fhdjdfhjd的博客
03-02 1197
antd select的placeholder不显示问题
解决react项目中使用ant design的Select组件placeholder不生效问题
fred8的博客
04-27 680
解决react项目中使用ant design的Select组件placeholder不生效问题问题解决方法 问题 在使用ant design的Select组件中， 需要对Select值可以自己填写，也可以进行后续的编辑。 initialValue需要赋值。 但initialValue和Select中的placeholder冲突。 解决方法 initialValue 必须为undefined才可以。 ...
antd Select组件placeholder不显示解决办法和原因
热门推荐
GMLGDJ的博客
01-30 1万+
解决办法：placeholder不显示是因为设置了value值为"或者null，把value值设为undefined就可以了 原因：placeholder是当前组件值为空时显示的替换文本，只有值为空的时候才会显示。当组件绑定了value后，值不再是空，即时初始化值为""或null也视为有值，所以placeholder自然就不会显示。
antd 踩坑之select的placeholder不显示问题
卡卡罗特的博客
05-13 1万+
在antd中 使用form去回显或者新增表单数据时，select的placeholder不显示 如下例子：新增的时候，默认地址是空 “” 或者 null, 都不好使 <FormItem label="所属网点" {...formItemLayout} > {getFieldDecorator("bankId", { initialValue: this.props.type=== "edit
React中使用antd的Select不显示placeholder
April_99的博客
05-15 342
起作用的代码：value={item.checkedValue?item.checkedValue : undefined} >当value为undefined时，会展示placeholder。
解决Antd中 select中的value值要是为空，placeholder不生效
我不写文章，我只是文章的搬运工
03-01 2598
解决Antd中 select中的value初始化的值要是为空，或者清空value值，placeholder不生效，比如在代码中 把select的默认值设置为空 下面是select组件 下面是页面显示的提示框 解决这个问题可以把select的value的初始化的值设置为undefined 下面是显示的框 ...
react使用antd表单赋值,用于修改弹框的操作
01-18
补充知识：react中使用antd的表单重置数据 resetFields 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 Function([names: string[]]) 注：initialValue有值时会
react-admin：React + AntD后台管理系统解决方案
02-05
欢迎使用后台管理系统解决方案本项目是针对（后台人员）或（扩展人员）或快速构建后台管理系统而创建项目过老。 最近更新 升级所有模块到最新,近期会陆续更新 依赖模块 项目是用create-react-app创建的，主要还是列...
react+antd搭建后台管理框架
05-20
react+antd搭建前端管理框架（***支持响应式***），主要模块分为：菜单、选项卡、面包屑；通过路由监听，实现三个模块之间的联动（同时监听浏览器）；状态采用react-redux进行集中管理。目前只包含前端代码，未与...
在antd Form表单中select设置初始值操作
01-18
我就废话不多说了，大家还是直接看代码吧~ <Form.Item label=作用对象> {getFieldDecorator('targetId', { initial...Select placeholder=请选择作用对象> {targetList.map(entity => <Option key={enti
create-react-app使用antd按需加载的样式无效问题的解决
10-17
总结来说，解决Create React App使用antd按需加载样式无效的问题，主要依赖于正确安装并配置babel-plugin-import插件，通过配置.babelrc文件或直接在webpack配置文件中添加对应的插件配置。这样一来，就可以确保antd...
[解决方案]Antd TreeSelect/Select placeholder失效
最新发布
weixin_43919327的博客
08-23 933
在 Ant Design 的 TreeSelect /Select组件中，如果没有选中任何值，value 属性应该是 undefined。 （注意 null也不行，如果是treeSelect会显示空标签） 这通常是在初始状态或者没有进行任何选择操作时的情况。如果您设置了 value 属性为 undefined，那么 placeholder 会显示在 TreeSelect 组件上，以提醒用户进行选择。
react中select下拉map显示不出值
Chris__wang的博客
01-31 2195
记录一下自己的错误 let data = [ {name:'名称',value:'qwe'} ] 错误写法 <Select> { data.map((v,k)=>{ <Option value={v.name} key='1'>{v.name}</Option> }) ...
a-select的placeholder不生效的问题
weixin_42234899的博客
03-01 3518
a-select的placeholder不生效的问题
textarea取消默认效果以及placeholder不显示问题
KOBE24forever的博客
05-28 1291
1、在用到textarea标签的时候，我们通常会发现，在点击输入文本框之后，文本框会有选中效果，如图所示： 效果就是-丑！！那么怎么取消掉这个选中的效果呢？在textarea标签之中设置outline:none，便可达到效果，如下： html代码如下： css： 2、在上面的html代码中我们可以看到，textarea文本输入框是设置了placeholder的，但是实际效果却是没有显示，这是什么原因？经过查找发现，在<textarea></textarea>标签之
react搜索框placeholder文字轮播
weixin_49720804的博客
03-12 1191
react antd 搜索框placeholder文字轮播 input聚焦失焦 搜索button时input默认值赋值
使用Ant Design的select组件时placeholder不生效/不起作用的解决办法
weixin_33937913的博客
03-14 9676
先来说说使用Ant Design和Element-ui的感觉吧。 公司的项目开发中用的是vue+element-ui，使用了一通下来后，觉得element-ui虽然也有一些问题或坑，但这些小问题或坑凭着自己的能力还都能解决掉，使用起来也很丝滑柔顺。 而听说Ant Design和React更配哦，但是也说一下使用Ant Design的感觉吧，首先个人觉得Ant Design给的demo有点乱七八糟，...
给select增加placeholder技巧
NRGAGA的专栏
03-28 1365
https://blog.csdn.net/maggie03230/article/details/48243391 1.使用默认option再隐藏此选项 <select> <option value='' disabled selected style='display:none;'>Please Choose</option> &lt...
React基础-JSX语法
qq_36822018的博客
09-03 1799
前言 学习和使用React有一段时间了，最近时间比较充裕，所以想把最近这段时间学习和使用react的心得和经验总结一下，从react的基础用法，到react-router、redux、immutable.js、styled-components等与react配套使用的一系列插件的使用都进行一个总结，写出来给大家分享下，本文只涉及基础用法，对于底层的原理和编译我另外再写文章表述。原文地址 ： Li...
react antd select下拉框选中一个值后变为输入框
03-30
在Ant Design的Select组件中，可以使用mode属性来设置下拉框的模式。默认情况下，mode属性的值为 "default"，表示下拉框只能选择预设的选项。如果将mode属性的值设置为 "tags"，则可以在下拉框中输入自定义的选项。 以下是一个示例代码： ``` import React, { useState } from "react"; import { Select } from "antd"; const { Option } = Select; const options = [ { value: "apple", label: "Apple" }, { value: "banana", label: "Banana" }, { value: "orange", label: "Orange" }, ]; function Demo() { const [value, setValue] = useState([]); function handleChange(value) { setValue(value); } return ( <Select mode="tags" style={{ width: "100%" }} placeholder="Please select" value={value} onChange={handleChange} > {options.map((option) => ( <Option key={option.value} value={option.value}> {option.label} </Option> ))} </Select> ); } export default Demo; ``` 在上面的代码中，我们将Select的mode属性设置为 "tags"，并且在handleChange函数中更新了组件的值。当用户选择一个预设的选项时，组件的值会变为该选项的值。当用户输入一个自定义的选项时，组件的值会变为输入框中的文本。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值