首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React-admin SelectInput不会在编辑中显示与选项一起使用的值

React-admin是一个基于React框架的开源后台管理界面框架,它提供了一系列的组件和工具,用于快速搭建现代化的管理界面。其中,SelectInput是React-admin提供的一个用于选择输入的组件。

在React-admin中,SelectInput组件用于在表单中提供一个下拉选择框,用户可以从预定义的选项中选择一个值。然而,有时候我们希望在编辑表单中显示已经选择的值,而不仅仅是选项列表。这时候,我们需要使用SelectInput的value属性来设置已选择的值。

具体来说,我们可以通过在编辑表单的数据源中设置SelectInput的value属性来显示已选择的值。例如,假设我们有一个名为"category"的字段,它的选项是一个包含多个分类的数组。我们可以通过设置编辑表单的数据源中的"category"字段来显示已选择的分类。

以下是一个示例代码:

代码语言:txt
复制
import { Edit, SimpleForm, SelectInput } from 'react-admin';

const CategoryEdit = (props) => (
    <Edit {...props}>
        <SimpleForm>
            <SelectInput
                source="category"
                choices={[
                    { id: '1', name: 'Category 1' },
                    { id: '2', name: 'Category 2' },
                    { id: '3', name: 'Category 3' },
                ]}
                value="2" // 设置已选择的值
            />
        </SimpleForm>
    </Edit>
);

export default CategoryEdit;

在上面的代码中,我们通过设置SelectInput的value属性为"2"来显示"Category 2"作为已选择的值。

对于React-admin的更多信息和使用方法,你可以参考腾讯云的React-admin产品介绍页面:React-admin产品介绍

希望以上信息能够帮助到你!如果还有其他问题,请随时提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

TDesign 更新周报(2022年9月第1周)

组件库Vue2 for Web 发布 0.46.4 FeaturesPopup: 新增 delay 属性用于控制延时显示或隐藏浮层,修复子 Popup 销毁时父级意外关闭问题 @ikeq (#1436...(vue-next #1570)修复在输入时 entry 键会默认全选第一个选项全部内容 (vue-next #1529)修复通过 SelectInputProps 透传方法属性导致传入 SelectInput... 数据变成数组 (vue-next #1502)修复 ellipsisTitle 配置优先级低于 ellipsis 问题 @Tomaolala (#1408)SelectInput: 修复多选清除无效导致...(vue-next #1529) @pengYYYYY (#1428)修复通过 SelectInputProps 透传方法属性导致传入 SelectInput 数据变成数组 (vue-next #1502...Nofitication: 修复 classname 透传问题,closebtn/icon 无法支持 bool 设置 @carolin913 (#1417)Table:修复 editableCellState 返回期望相反问题

2.6K20

TDesign 更新周报(2022年9月第3周)

,添加 row/rowIndex/col/colIndex 到 onEdited @chaishi (#1695)ImageViewer: 支持 title  trigger  open api...:修复select-input使用valueDisplay渲染自定义tag筛选项展示居中错误 @AqingCyan (#1503)修复 SelectInput 自适应换行问题 @HQ-Lin (#1500...DOM 以及代码逻辑 @LeeJim (#863)ActionSheet: 修复 theme = list 时点击选项之后报错问题 @LeeJim (#866)Tabs: 修复嵌套使用时样式错误问题... max 问题 @anlyyao (#304)Stepper: 修复 value 小于 min 或超出 max 时,不触发 overlimit 问题 @anlyyao (#304)Collapse...: 修复 headerRightContent 插槽文档描述不一致问题 @isanxia (#330) Others官网: 更新浏览器兼容性说明文档 @anlyyao (#349)详情见:https

65910

组件封装之输入框下拉列表

项目是使用iview组件,一开始想着在自定义iview下拉选择,后来发现效果并不理想。为了实现功能,就在iview输入框基础上进行了组件封装,下面就来讲下组件封装过程。...确定父子组件数据传递props props: { // 父组件传递输入框初始 value: { type: String, default: ''...定义组件data data() { return { // 控制下拉列表显示 dropdownShow: false, // 控制下拉列表数据为空提示显示...,给输入框绑定一个inputValue和一个input事件。...不为空则循环迭代从父组件传递过来dropdownList,并将符合条件item存进searchDataList,然后在组件通过v-for渲染出数据(微信搜索公众号 逆锋起笔,关注后回复 编程资源,

2.1K40

TDesign 更新周报(2022年7月第2周)

Cascader: 修复多选时,文本过长未处理问题修复选中内容过多时,再点击选择器后闪动问题SelectInput: 修复 overlayStyle 响应式无法更新问题TagInput: 修复 inputProps...: 优化允许输入滚动使用体验TimeRangePicker 修复允许输入缺陷Select: 修复远程搜索动态生成选项失败缺陷虚拟滚动支持远程搜索场景Dialog: 修复阻止冒泡导致 popup 无法正常关闭...通过FOR循环内容 没有实现间隔效果DatePicker: 修复日期格式化问题TimePicker: 优化可输入模式使用体验 避免高频输入场景滚动事件重复更新 value 异常Tree: 取消修改...destroyOnClose 之后,没了动画效果TreeSelect: 修复异步加载回显展示问题Textarea: 修复无法传入 attrs style详情见:https://github.com...Bug FixesTable: 可编辑功能,为 null 时会导致页面报错,如清除 Select 数据Dialog: 修复 dialog 阻止冒泡导致 popup 无法正常关闭Input: 修复在

2.2K10

「Shiny」应用程序布局指南

网格布局可以在 fluidPage() 任何地方使用,而且支持嵌套。你可以在下方章节获取更多内容介绍。 标签(选项)集 通常应用需要将用户界面划分为几个独立部分。...二级导航 可以使用 navbarMenu() 函数向页面添加第二级导航。这为顶级导航栏添加了一个菜单,可以参考其他选项卡面板。 ?...footer 标签或标签列表显示为一个通用页脚下面的所有标签面板。 inverse “TRUE”表示导航栏使用深色背景和浅色文本。...要基于 fluid 系统创建布局,请使用fluidPage() 函数。要在网格创建行,请使用 fluidRow()函数;要在行创建列,可以使用column()函数。...一般来说,我们建议使用 fluid 网格,除非您绝对需要由固定网格提供低层布局控制。 使用固定网格 在 Shiny 中使用固定网格 fluid 网格效果几乎相同。

7K32

TDesign 更新周报(2022年8月第1周)

使用 esm 包修改 less token 业务需要注意,组件库各组件实现圆角也做了统一调整,详情参见 #158 ,存在不兼容更新。...FeaturesSelectInput: SelectInput 及相关 Select/Cascader/TreeSelect 组件交互调整,再次点击输入框时也可以收起下拉框Table:支持使用插槽...使用 esm 包修改 less token 业务需要注意,组件库各组件实现圆角也做了统一调整,详情参见 #158 ,存在不兼容更新 FeaturesSelectInput:SelectInput及相关...,参数校验导致用户行为异常Select: 修复回删空字符串不触发 onSearch 缺陷Select: 修复过滤时输入为空未显示全部选项问题Dropdown: 修复 className 继承问题Tree...发布 0.10.1 Bug Fixessearch: 修复失去焦点后输入内容被隐藏和清除按钮无法使用问题Tabs: 修复传入相同时仍触发 onChange 问题Popup: 修复使用 overlay

3.5K10

TDesign 更新周报(2022年8月第5周)

: 兼容因 v-model 初始为 undefined 导致 useModel 失效问题Table:修复 editableCellState 表现预期相反问题修复多级表头下不支持调整列宽问题Select...Swiper: 增加 dots 和 dots-bar 样式Grid:align可选新增 start/end/center等 Bug FixesTable:修复了editableCellState 表现预期相反问题允许在表头分割线一定范围内触发列宽调整逻辑...Cascader:修复单选模式下 clearIcon无法删除修复在输入时 entry 键会默认全选第一个选项全部内容修复通过 SelectInputProps 透传方法属性导致传入 SelectInput...数据变成数组RangeInput: 修正RangeInput右侧图标没有居中对齐问题DatePicker: 修复了 TExtraContent 组件 selectedValue Props... number 比较错误及其导致分页组件样式异常问题Popconfirm: Popconfirm 样式优化Input: 修正 clearable 和 password 模式预览按钮无法同时存在问题详情见

1.1K20

基于R语言shiny网页工具开发基础系列-03

上面是shiny团队稿件 l3-更复杂页面部件 shiny 小部件提供了一个用户给app传送信息方式 为什么加上控制小工具 上节已经学会在用户界面放置一些简单元素,但显示更复杂内容需要用到小部件...或 mainPanel 函数 每个widget 函数都要几个参数,每个widget前两个参数一定是: widget名字name:用户不会看到这个名字,但是可以用它获取widget,应该用字符串...一个label:这个标签将和app小部件一起出现,应该是字符串,但是也可以是空"" 此例,name参数是"action", 标签是 "Action" actionButton("action"...app 访问这个网站,图库展示了每个小部件,并演示了每个小部件根据你输入而变化 选择一个小工具,并点击See Code。...图库会跳转到一个描述这个小工具示例app,只需要复制其中代码到自己app即可。

2.5K20

TDesign 更新周报(2022年6月第3周)

0.42.1FeaturesForm:实例方法 reset 支持重置指定字段,新增参数 { type:'initial' | 'empty', fields:number[] }实例方法 validate 支持校验而不显示每个组件错误信息文本...,移除 range api,分别导出 Datepicker DateRangePicker,存在不兼容更新TimePicker:重构TimePicker为 compositionAPI,全新UI样式及交互...Select:修复透传 inputProps 参数无效switch:修复 slots.label 参数无效TreeSelect:优化过滤状态下输入框交互,修复 selectInput 参数透传数据响应问题...CheckBox:修复二次封装多选框组件插槽定义选项失效Upload:修复图片列表模式存在图片列表情况下,拖拽图片会触发浏览器默认打开图片行为Slider:修复 slider 数字输入框初始化重复渲染问题...,选择之后直接关闭Bug FixesDialog: 修复取消按钮传递 Object 显示不正确问题Checkbox: 修复外部样式类无法使用问题详情见:https://github.com/Tencent

3K10

Shiny学习(四)||响应式输出

Shiny应用程序控件选中可以通过生成响应式输出来显示。用户切换控件,输出文本也随着控件自动响应。...下面将添加对控件响应。 创建响应式输出主要分为两步: 1.将R对象添加到ui用户界面。 2.在server构建响应式对象并调用控件。...在ui设置Shiny在哪里显示对象后,接下来,需要告诉Shiny如何构建对象。为此,需要在server函数构建对象。server会建立一个outputlist,其中包含更新R对象代码。...如下:在serveroutput$selected_varuitextOutput("selected_var") 是一致。...响应控件 上述反应输出是一段固定文字,动态响应小控件,还需要引入input。

1.5K30

Processing玩转国庆头像生成

开源地址:https://github.com/xiaocai-laoniao/Processing100DaysSketch 代码在 Day_027 文件夹,已经加了详细注释,如果大家有不明白,...可以留言~ 实现思路 封面图获取 首先从网上找几个大家常用国庆头像封面图,下载下来,保存到 data 文件夹,这里依次命名为 header1.png ~ header7.png, 一共 7...功能划分 头像和封面图合成显示 第一部分头像和封面图合成预览区域,这块使用PGraphics来解决,可以将之看成一个单独图层,方便我们只将合成头像部分导出保存。...这里涉及到一个文件选择器使用,API 为selectInput。...小菜老鸟后期会不定期更新一些 Processing 绘制代码思路分析,欢迎关注不迷路。 如果有收获,能一键三连么?

64320

IntelliJ IDEA 2021.1正式发布!快来看看又有哪些神仙功能加入!

让我们一起来具体看下吧: Space 集成 Space 集成,可以通过欢迎屏幕上 Get from VCS 连接到 JetBrains Space 组织。...打开多个垂直分割编辑选项卡时,可以双击其中任意一个以最大化该特定选项编辑器窗口。只需再次双击即可将窗口恢复到原始大小。...还可以将列表多文档 YAML 文件相互转换。 可以创建自定义 values.yaml 文件。IDE 会将名称带有“values”文件视为文件。...捆绑 MDN 文档,MDN 文档现 IntelliJ IDEA 捆绑。这将有助于防止 MDN 网站连接问题,并使编辑器内文档在 HTML、CSS 和 JavaScript 文件显示得更快。...如果要在客户端使用排序(IntelliJ IDEA 不会重新运行查询,也不会在当前页面对数据进行排序),应取消选中 Sort via ORDER BY。

2.2K40

TDesign 更新周报(2022年4月第1周)

,月份/年份选择面板样式异常问题 修复 Table/SelectInput/TagInput 按需引入时出现 composition-api 相关报错问题 Features Table: 支持外部设置当前显示列...tag/0.40.0 Vue2 for Web 发布 0.39.1 版 Bug Fixes Upload: 修复 success 事件先于 progress 事件触发时,上传文件 loadingFile 不正确问题...同时传入 key、load 时选中项显示问题 修正 TreeSelect 交互行为, Select 保持一致 修复 filter 状态下,树无法折叠问题;修复 lazy 状态下,无法正确展示...,无法进行正确列配置问题,列配置仅显示了第一层表头 verticalAlign 不生效问题 右上角出现文字穿透问题 固定表头和固定列,全部使用 CSS sticky 输出样式,组件仅渲染一个表格,表头和表内容...BaseTableCol 配置项 fixed 和 ellipsis(true) 属性共存导致fix阴影无法显示 多级表头表格 改变 children 宽度无效 table 组件使用 PrimaryTable

2.4K20

Kali Linux Web渗透测试手册(第二版) - 2.7 - 获取和修改cookie

在这个小节,我们将使用浏览器工具来查看cookie,它们是怎样被存储,以及怎样被修改。 准备 首先把我们vm1虚拟机运行起来,并把ip地址设置为192.168.56.11。...接下来将使用firefox作为我们浏览器。 在Firefox,默认情况下不会启用开发者工具存储选项卡,要想启用它,先打开开发者工具(可以摁F12),然后进入工具箱选项(右边齿轮图标)。...怎么做… 要查看和编辑cookie,我们可以使用开发者工具或第一章中被安装cookie管理器插件。设置好kali和测试环境,让我们试试这两种方法: 1....打开开发者工具,进入存储选项卡: 我们可以通过双击cookie来修改成任意cookie 3. 现在,我们试试使用插件查看并编辑cookie。...但我们仍然可以通过浏览器工具或插件修改它 Secure:cookie不会在未加密通道传输;如果网站使用了https并且在cookie设置了secure属性,当请求在http处理时,浏览器不会接受和发送

1K20

基于shinydashboard搭建你仪表板(二)

有输入就有输出,输入项需要传给输出项,输出项都是成对出现:在ui中使用*Output,在serverender*之对应,两者通过变量名对应。常用有以下几对常用输出项: ?...(),输入项函数输出项*Output()函数写在ui脚本dashboardBody(),render*函数写在server脚本之对应。...请留意上图代码输入项selectInput函数书写位置以及输出函数plotOutput以及renderPlot位置,两者是通过“Plot”变量名对应。...downloadLinkdownloadButton输入项 用于下载数据,两个输入项函数可以等价替换,downloadLink输入项函数显示是一个下载链接,downloadButton输入项函数显示是一个下载按钮...当你做交互式界面的时候,需要用到几个输入项函数时,累加一起使用即可。

2.6K30

Linux vimrc常见配置

选项。...只有在输入搜索模式并且打开 ‘ignorecase’ 选项时才会使用 set autowrite 自动把内容写回文件也就是自动保存 set autoindent 设置自动对齐(缩进):即每行缩进上一行相等...也就是说,不会在单词内部折行 set wrapmargin=2 指定折行处编辑窗口右边缘之间空出字符数 set scrolloff=5 垂直滚动时,光标距离顶部/底部位置(单位:行) set sidescrolloff...这意味着,重新打开一个文件,可以撤销上一次编辑操作。撤消文件是跟原文件保存在一起隐藏文件,文件名以.un~开头 set autochdir 自动切换工作目录。...如果在编辑过程中文件发生外部改变(比如被别的编辑编辑了),就会发出提示 持续更新… vim博大精深,先看看有哪比较使用vim插件 Linux 为源代码生成ctags: 1.sudo

2.7K10
领券