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

Posted 2020-12-22 guoqiaoqiao

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