From 05ebf0f8ccd212204a1df184d166f81baa1f3ce8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 9 Jan 2020 11:13:07 +0800 Subject: [PATCH] chore: Not block input when Input value is `undefined` (#20783) * chore: Input should not block input when `value` is undefined * add test casw * Fix test case & add breaking change in changelog * fix prevValue logic * patch change log --- CHANGELOG.en-US.md | 2 ++ CHANGELOG.zh-CN.md | 2 ++ components/input/ClearableLabeledInput.tsx | 1 - components/input/Input.tsx | 17 ++++++++++------- components/input/__tests__/index.test.js | 11 +++++++++++ docs/react/migration-v4.en-US.md | 1 + docs/react/migration-v4.zh-CN.md | 1 + 7 files changed, 27 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 1a9f017c07..17f542983b 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -68,7 +68,9 @@ Ant Design 4.0-rc released! Here is the release [document](https://github.com/an - 🌟 Tree supports virtual scrolling. [#18172](https://github.com/ant-design/ant-design/pull/18172) - 🌟 Tree Enhanced accessibility support and keyboard interaction. [#18866](https://github.com/ant-design/ant-design/pull/18866) - 🌟 Select uses virtual scrolling and enhanced accessibility support and keyboard interaction. [#18658](https://github.com/ant-design/ant-design/pull/18658) + - 🌟 Uncontrolled mode when `value` is `undefined` now. - 🌟 TreeSelect uses virtual scrolling and optimizes keyboard support. [#19040](https://github.com/ant-design/ant-design/pull/19040) + - 🌟 Uncontrolled mode when `value` is `undefined` now. - 🌟 Button adds `default` and`link` styles for `danger`. [#19837](https://github.com/ant-design/ant-design/pull/19837) - 🌟 Form and ConfigProvider support `size` setting to include component size. [#20570](https://github.com/ant-design/ant-design/pull/20570) - 🌟 Typography adds `suffix` attribute. [#20224](https://github.com/ant-design/ant-design/pull/20224) diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 6367ac5633..087cd38d95 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -68,7 +68,9 @@ Ant Design 4.0-rc 发布，发布文档请查看[此处](https://github.com/ant- - 🌟 Tree 支持虚拟滚动。[#18172](https://github.com/ant-design/ant-design/pull/18172) - 🌟 Tree 增强无障碍支持以及键盘交互。[#18866](https://github.com/ant-design/ant-design/pull/18866) - 🌟 Select 使用虚拟滚动并增强无障碍支持以及键盘交互。[#18658](https://github.com/ant-design/ant-design/pull/18658) + - 🌟 `value` 为 `undefined` 时，改为非受控模式。 - 🌟 TreeSelect 使用虚拟滚动并优化键盘支持。[#19040](https://github.com/ant-design/ant-design/pull/19040) + - 🌟 `value` 为 `undefined` 时，改为非受控模式。 - 🌟 Button 添加 `danger` 的 `default` 和 `link` 样式。[#19837](https://github.com/ant-design/ant-design/pull/19837) - 🌟 Form 与 ConfigProvider 支持 `size` 设置包含组件尺寸。[#20570](https://github.com/ant-design/ant-design/pull/20570) - 🌟 Typography 增加 `suffix` 属性。[#20224](https://github.com/ant-design/ant-design/pull/20224) diff --git a/components/input/ClearableLabeledInput.tsx b/components/input/ClearableLabeledInput.tsx index 3b082d62d8..fae2294b46 100644 --- a/components/input/ClearableLabeledInput.tsx +++ b/components/input/ClearableLabeledInput.tsx @@ -18,7 +18,6 @@ interface BasicProps { prefixCls: string; inputType: typeof ClearableInputType[number]; value?: any; - defaultValue?: any; allowClear?: boolean; element: React.ReactElement; handleReset: (event: React.MouseEvent) => void; diff --git a/components/input/Input.tsx b/components/input/Input.tsx index b3fbc71662..4eafdfd0af 100644 --- a/components/input/Input.tsx +++ b/components/input/Input.tsx @@ -72,6 +72,8 @@ export function getInputClassName( export interface InputState { value: any; + /** `value` from prev props */ + prevValue: any; } class Input extends React.Component { @@ -100,16 +102,17 @@ class Input extends React.Component { const value = typeof props.value === 'undefined' ? props.defaultValue : props.value; this.state = { value, + // eslint-disable-next-line react/no-unused-state + prevValue: props.value, }; } - static getDerivedStateFromProps(nextProps: InputProps) { - if ('value' in nextProps) { - return { - value: nextProps.value, - }; + static getDerivedStateFromProps(nextProps: InputProps, { prevValue }: InputState) { + const newState: Partial = { prevValue: nextProps.value }; + if (nextProps.value !== undefined || prevValue !== nextProps.value) { + newState.value = nextProps.value; } - return null; + return newState; } componentDidMount() { @@ -158,7 +161,7 @@ class Input extends React.Component { }; setValue(value: string, callback?: () => void) { - if (!('value' in this.props)) { + if (this.props.value === undefined) { this.setState({ value }, callback); } } diff --git a/components/input/__tests__/index.test.js b/components/input/__tests__/index.test.js index ba324d4639..a4948a7c93 100644 --- a/components/input/__tests__/index.test.js +++ b/components/input/__tests__/index.test.js @@ -442,4 +442,15 @@ describe('TextArea allowClear', () => { const wrapper = mount(