Browse Source

docs: Add AutoComplete migrate demo (#26838)

pull/26839/head
二货机器人 4 years ago
committed by GitHub
parent
commit
8315262804
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 22
      components/auto-complete/index.en-US.md
  2. 22
      components/auto-complete/index.zh-CN.md
  3. 1
      docs/react/migration-v4.en-US.md
  4. 1
      docs/react/migration-v4.zh-CN.md

22
components/auto-complete/index.en-US.md

@ -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' },
];
```

22
components/auto-complete/index.zh-CN.md

@ -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' },
];
```

1
docs/react/migration-v4.en-US.md

@ -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.

1
docs/react/migration-v4.zh-CN.md

@ -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…
Cancel
Save