refactor: input string refs to callback (#7489)

components/cascader/index.tsx

@@ -107,12 +107,8 @@ export default class Cascader extends React.Component<CascaderProps, any> {
   };
 
   cachedOptions: CascaderOptionType[];
-  refs: {
-    [key: string]: any;
-    input: {
-      refs: { input: HTMLElement },
-    };
-  };
+
+  input: Input;
 
   constructor(props) {
     super(props);
@@ -253,6 +249,10 @@ export default class Cascader extends React.Component<CascaderProps, any> {
     return [{ label: notFoundContent, value: 'ANT_CASCADER_NOT_FOUND', disabled: true }];
   }
 
+  saveInput = (node) => {
+    this.input = node;
+  }
+
   render() {
     const { props, state } = this;
     const {
@@ -321,8 +321,8 @@ export default class Cascader extends React.Component<CascaderProps, any> {
     }
     // The default value of `matchInputWidth` is `true`
     const resultListMatchInputWidth = (showSearch as ShowSearchType).matchInputWidth === false ? false : true;
-    if (resultListMatchInputWidth && state.inputValue && this.refs.input) {
-      dropdownMenuColumnStyle.width = this.refs.input.refs.input.offsetWidth;
+    if (resultListMatchInputWidth && state.inputValue && this.input) {
+      dropdownMenuColumnStyle.width = this.input.input.offsetWidth;
     }
 
     const input = children || (
@@ -335,7 +335,7 @@ export default class Cascader extends React.Component<CascaderProps, any> {
         </span>
         <Input
           {...inputProps}
-          ref="input"
+          ref={this.saveInput}
           placeholder={value && value.length > 0 ? undefined : placeholder}
           className={`${prefixCls}-input ${sizeCls}`}
           value={state.inputValue}

components/input/Input.tsx

@@ -78,9 +78,7 @@ export default class Input extends Component<InputProps, any> {
     suffix: PropTypes.node,
   };
 
-  refs: {
-    input: HTMLInputElement;
-  };
+  input: HTMLInputElement;
 
   handleKeyDown = (e) => {
     const { onPressEnter, onKeyDown } = this.props;
@@ -93,11 +91,11 @@ export default class Input extends Component<InputProps, any> {
   }
 
   focus() {
-    this.refs.input.focus();
+    this.input.focus();
   }
 
   blur() {
-    this.refs.input.blur();
+    this.input.blur();
   }
 
   getInputClassName() {
@@ -109,6 +107,10 @@ export default class Input extends Component<InputProps, any> {
     });
   }
 
+  saveInput = (node) => {
+    this.input = node;
+  }
+
   renderLabeledInput(children) {
     const props = this.props;
     // Not wrap when there is not addons
@@ -212,14 +214,14 @@ export default class Input extends Component<InputProps, any> {
         {...otherProps}
         className={classNames(this.getInputClassName(), className)}
         onKeyDown={this.handleKeyDown}
-        ref="input"
+        ref={this.saveInput}
       />,
     );
   }
 
   render() {
     if (this.props.type === 'textarea') {
-      return <TextArea {...this.props as any} ref="input" />;
+      return <TextArea {...this.props as any} ref={this.saveInput} />;
     }
     return this.renderLabeledInput(this.renderInput());
   }

components/input/Search.tsx

@@ -11,14 +11,21 @@ export default class Search extends React.Component<SearchProps, any> {
   static defaultProps = {
     prefixCls: 'ant-input-search',
   };
-  input: any;
+
+  input: Input;
+
   onSearch = () => {
     const { onSearch } = this.props;
     if (onSearch) {
-      onSearch(this.input.refs.input.value);
+      onSearch(this.input.input.value);
     }
     this.input.focus();
   }
+
+  saveInput = (node) => {
+    this.input = node;
+  }
+
   render() {
     const { className, prefixCls, ...others } = this.props;
     delete (others as any).onSearch;
@@ -35,7 +42,7 @@ export default class Search extends React.Component<SearchProps, any> {
         {...others}
         className={classNames(prefixCls, className)}
         suffix={searchSuffix}
-        ref={node => this.input = node}
+        ref={this.saveInput}
       />
     );
   }