被撕裂的风

[antd] Select标签设置默认值不展示

复制代码
 1     <FormItem
 2         className={style.client}
 3         name="client"
 4         rules={[{ required: false }]}
 5         label={
 6            <div className={style.label}>
 7              <span>label</span>{' '}
 8            </div>
 9                 }
10      >
11        <Select className={style.selectClient}
12         // size='small'
13          showSearch
14           value={value}
15                   labelInValue
16                   placeholder=""
17                   // style={{ width: '96%' }}
18                   defaultActiveFirstOption={false}
19                   showArrow={false}
20                   filterOption={false}
21                   onSearch={e => handleSearch(e)}
22                   onChange={e => handleChange(e)}
23                   notFoundContent={null}
24                 >
25                   {
26                     searchData && searchData.map(data => <Option key={data.custNo}>{data.custNo}-{data.custName}</Option>)
27                   }
28                 </Select>
29         </FormItem>
30  
复制代码

代码如上,嵌入在Form中的Select组件,用form.setFieldsValue({ client: '2' })设置选中值无法实现。

经过排查,发现是因为设置了 labelInValue ,设置该属性后,Select的选中值由Type<String> 变为Type<ReactNode>,导致设置的值不被展示。

官网对labelInValue的解释:【是否把每个选项的 label 包装到 value 中,会把 Select 的 value 类型从 string 变为 { value: string, label: ReactNode } 的格式】

解决方案:

  1.不使用该属性;

  2.按照 Type<ReactNode> 格式给Select 赋值。

posted on   被撕裂的风  阅读(3106)  评论(0编辑  收藏  举报

编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

导航

统计

点击右上角即可分享
微信分享提示