mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
docs: Add AutoComplete migrate demo (#26838)
This commit is contained in:
parent
93f2988585
commit
8315262804
@ -58,3 +58,25 @@ Related issue: [#18230](https://github.com/ant-design/ant-design/issues/18230) [
|
||||
### Part of api from v3 not available in v4?
|
||||
|
||||
AutoComplete is a Input component support auto complete tips which should not support `labelInValue` prop to modify dispaly value in input. In v3, AutoComplete realization can not handle case that user type match of both `value` & `label` are the same. v4 not longer support `label` as the value input.
|
||||
|
||||
Besides, to unique API, `dataSource` replaced with `options`:
|
||||
|
||||
#### v3
|
||||
|
||||
```tsx
|
||||
dataSource = ['light', 'bamboo'];
|
||||
// or
|
||||
dataSource = [
|
||||
{ value: 'light', text: 'Light' },
|
||||
{ value: 'bamboo', text: 'Bamboo' },
|
||||
];
|
||||
```
|
||||
|
||||
#### v4
|
||||
|
||||
```tsx
|
||||
options = [
|
||||
{ value: 'light', label: 'Light' },
|
||||
{ value: 'bamboo', label: 'Bamboo' },
|
||||
];
|
||||
```
|
||||
|
@ -60,3 +60,25 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
|
||||
### v3 的部分属性为何在 v4 中没有了?
|
||||
|
||||
AutoComplete 组件是一个支持自动提示的 Input 组件,因而其不具有 `labelInValue` 等影响 value 展示的属性。在 v3 版本,AutoComplete 实现存在输入值如果遇到 `value` 与 `label` 相同时无法映射的问题。 v4 中不再支持 `label` 为值的输入形态。
|
||||
|
||||
此外为了统一 API,`dataSource` 改为 `options` 你可以如下转换:
|
||||
|
||||
#### v3
|
||||
|
||||
```tsx
|
||||
dataSource = ['light', 'bamboo'];
|
||||
// or
|
||||
dataSource = [
|
||||
{ value: 'light', text: 'Light' },
|
||||
{ value: 'bamboo', text: 'Bamboo' },
|
||||
];
|
||||
```
|
||||
|
||||
#### v4
|
||||
|
||||
```tsx
|
||||
options = [
|
||||
{ value: 'light', label: 'Light' },
|
||||
{ value: 'bamboo', label: 'Bamboo' },
|
||||
];
|
||||
```
|
||||
|
@ -125,6 +125,7 @@ const Demo = () => (
|
||||
- use virtual scrolling.
|
||||
- `onBlur` no longer trigger value change and return React origin `event` object instead.
|
||||
- AutoComplete no longer support `optionLabelProp`. Please set Option `value` directly.
|
||||
- AutoComplete options definition align with Select. Please use `options` instead of `dataSource`.
|
||||
- Select remove `dropdownMenuStyle` prop.
|
||||
- Use `listHeight` to config popup height instead of `dropdownStyle`.
|
||||
- `filterOption` return origin data with second params instead. No need to use `option.props.children` for matching.
|
||||
|
@ -125,6 +125,7 @@ const Demo = () => (
|
||||
- 使用虚拟滚动。
|
||||
- `onBlur` 时不再修改选中值,且返回 React 原生的 `event` 对象。
|
||||
- AutoComplete 不再支持 `optionLabelProp`,请直接设置 Option `value` 属性。
|
||||
- AutoComplete 选项与 Select 对齐,请使用 `options` 代替 `dataSource`。
|
||||
- Select 移除 `dropdownMenuStyle` 属性。
|
||||
- 如果你需要设置弹窗高度请使用 `listHeight` 来代替 `dropdownStyle` 的高度样式。
|
||||
- `filterOption` 第二个参数直接返回原数据,不在需要通过 `option.props.children` 来进行匹配。
|
||||
|
Loading…
Reference in New Issue
Block a user