码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-12-16 11:42:08      阅读:3      评论:0      收藏:0      [点我收藏+]

标签:nod   amp   sel   default   span   标签设置   code   无法   label   

 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 赋值。

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

标签:nod   amp   sel   default   span   标签设置   code   无法   label   

原文地址:https://www.cnblogs.com/guoqiaoqiao/p/14115628.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!