@aliretail/react-materials-components
Version:
163 lines (151 loc) • 6.72 kB
Markdown
---
title: Select
order: 40
---
继承 Fusion Select 的所有属性值，以下再列出几个常用 props ，同时增加了 requestConfig 配置项
| 成员 | 说明 | 类型 | 是否必填 | 默认值 | 备注 |
| ------------- | -------------------------------------------------------------- | ------- | -------- | ------ | ---------------------------- |
| showSearch | 展开后是否能搜索（tag 模式下固定为 true） | boolean | 否 | false | autoCompleteX 中不带这个字段 |
| filterLocal | 是否使用本地过滤，在数据源为远程的时候需要关闭此项 | boolean | 否 | true | |
| useVirtual | 是否开启虚拟滚动模式（用于开启性能模式） | boolean | 否 | - | |
| requestConfig | 继承 ahooks useRequest 的 params，增加 service 和 searchFormat | object | 是 | - | |
其他参数参考 Fusion Select 的其他参数，全部可正常使用
继承 ahooks useRequest 的 params，增加 service 和 searchFormat
| 成员 | 说明 | 类型 | 是否必填 | 默认值 | 备注 |
| ------------ | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | -------- | ------ | ---- |
| service | 请求数据源的参数，参数使用 whale-request 的传入配置 | object | 是 | - | |
| searchFormat | 当 showSearch && filterLocal==={false} 时启用，用于将搜索参数追加到接口上 | (inputValue: string) => object | 否 | - | |
| refreshDeps | 传入的依赖一旦被修改，则会触发重请求 | any[] | 否 | [] | |
| cacheKey | - 一旦被设置，则开始缓存算法，相同 cacheKey 的请求会被直接返回在缓存中的结果，用于字典请求或多个选择器公用数据的结果 | string | 否 | - | |
| formatResult | 格式化请求结果（用于修改不标准的选择数据源） | (response:any) => any | 否 | - | |
| onSuccess | 请求一旦成功，参数就是请求成功的结果，如果设置了 formatResult，则参数是已经格式化的值 | (data: any, params: any[]) => void | 否 | - | |
| onError | 请求失败触发，参数时 error 实例和 params | (error: Error, params: any[]) => void | 否 | - | |
其他参数参考 ahooks useRequest 的 params 部分
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { FormComponents } from '@aliretail/react-materials-components';
const { Select, SchemaForm, SchemaMarkupField: Field, createFormActions } = FormComponents;
const App = () => {
return (
<SchemaForm
components={{
Select,
}}
onChange={console.log}
defaultValue={{
readOnly: '1',
AutoCompleteX2: '3',
}}
>
<Field
x-component="Select"
enum={['1', '2', '3', '4']}
required
title="Simple Select"
name="simpleSelect"
x-component-props={{
placeholder: 'select',
}}
/>
<Field
x-component="Select"
enum={[
{ label: 'One', value: '1' },
{ label: 'Two', value: '2' },
{ label: 'Three', value: '3' },
{ label: 'Four', value: '4' },
]}
required
title="Object Select"
name="objSelect"
x-component-props={{
placeholder: 'select',
}}
/>
<Field
x-component="Select"
enum={[
{ label: 'One', value: '1' },
{ label: 'Two', value: '2' },
{ label: 'Three', value: '3' },
{ label: 'Four', value: '4' },
]}
readOnly
title="readOnly"
name="readOnly"
/>
<Field
title="动态选择"
x-component="SelectX"
x-component-props={{
requestConfig: {
service: {
url: 'https://rap2api.alibaba-inc.com/app/mock/6013/AutoCompleteX',
method: 'POST',
},
},
}}
/>
<Field
title="AutoCompleteX"
x-component="AutoCompleteX"
x-component-props={{
requestConfig: {
service: {
url: 'https://rap2api.alibaba-inc.com/app/mock/6013/AutoCompleteX',
method: 'POST',
},
},
}}
/>
<Field
title="AutoCompleteX动态搜索"
name="AutoCompleteX2"
x-component="AutoCompleteX"
x-component-props={{
filterLocal: false,
requestConfig: {
service: {
// appCode: 'retailforce_oms',
// apiCode: 'retailforce_oms_api',
url: 'https://rap2api.alibaba-inc.com/app/mock/6013/AutoCompleteX',
method: 'POST',
},
searchFormat: (inputValue) => ({ data: { value: inputValue } }),
},
}}
/>
<Field
title="动态选择"
x-component="SelectX"
x-component-props={{
requestConfig: {
service: {
url: 'https://rap2api.alibaba-inc.com/app/mock/6013/AutoCompleteX',
method: 'POST',
},
},
}}
/>
<Field
title="动态搜索"
x-component="SelectX"
x-component-props={{
filterLocal: false,
requestConfig: {
service: {
url: 'https://rap2api.alibaba-inc.com/app/mock/6013/AutoCompleteX',
method: 'POST',
},
searchFormat: (inputValue) => ({ data: { value: inputValue } }),
},
}}
/>
</SchemaForm>
);
};
ReactDOM.render(<App />, mountNode);
```