未验证 提交 83152628 编写于 作者: 二货机器人 提交者: GitHub

docs: Add AutoComplete migrate demo (#26838)

上级 93f29885
......@@ -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` 来进行匹配。
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册