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

Posted guoqiaoqiao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[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 赋值。

以上是关于[antd] Select标签设置默认值不展示的主要内容,如果未能解决你的问题,请参考以下文章

struts2页面中修改为啥select值不回显

antd+vue table表格 是否启用 状态显示

antd -- Form和Modal弹出提示框,默认值不动态变换的问题

antd -- Form和Modal弹出提示框,默认值不动态变换的问题

使用 react-select 设置默认值不起作用

antd默认清除select选中的内容(最简便方式)