Refac: rewrite transfer search with hook

components/transfer/search.tsx

@@ -13,50 +13,42 @@ export interface TransferSearchProps {
   disabled?: boolean;
 }
 
-export default class Search extends React.Component<TransferSearchProps, any> {
+export default function Search(props: TransferSearchProps) {
-  static defaultProps = {
+  const { placeholder = '', value, prefixCls, disabled, onChange, handleClear } = props;
-    placeholder: '',
-  };
 
-  handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = React.useCallback(
-    const { onChange } = this.props;
+    (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (onChange) {
+      if (onChange) {
-      onChange(e);
+        onChange(e);
-    }
+      }
-  };
+    }, [onChange],
+  )
 
-  handleClear = (e: React.MouseEvent<HTMLAnchorElement>) => {
+  const handleClearFn = (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault();
-    const { handleClear, disabled } = this.props;
     if (!disabled && handleClear) {
       handleClear(e);
     }
   };
 
-  render() {
+  return (
-    const { placeholder, value, prefixCls, disabled } = this.props;
+    <>
-    const icon =
+      <Input
-      value && value.length > 0 ? (
+        placeholder={placeholder}
-        <a className={`${prefixCls}-action`} onClick={this.handleClear}>
+        className={prefixCls}
+        value={value}
+        onChange={handleChange}
+        disabled={disabled}
+      />
+      {value && value.length > 0 ? (
+        <a className={`${prefixCls}-action`} onClick={handleClearFn}>
           <CloseCircleFilled />
         </a>
       ) : (
         <span className={`${prefixCls}-action`}>
           <SearchOutlined />
         </span>
-      );
+      )}
-
+    </>  
-    return (
+  )
-      <>
-        <Input
-          placeholder={placeholder}
-          className={prefixCls}
-          value={value}
-          onChange={this.handleChange}
-          disabled={disabled}
-        />
-        {icon}
-      </>
-    );
-  }
 }