fix(Input): input value by Chinese (#1632)

* fix(Input): input value by Chinese

* fix(test): remove unnecessary code

Co-authored-by: Zhang Rui <zhangrui@growingio.com>

src/input/Input.tsx

@@ -2,7 +2,6 @@ import React, { useCallback, useMemo } from 'react';
 import classNames from 'classnames';
 import { InputProps } from './interface';
 import usePrefixCls from '../utils/hooks/use-prefix-cls';
-import useControlledState from '../utils/hooks/useControlledState';
 
 const Input = React.forwardRef<HTMLSpanElement, InputProps>((props, ref) => {
   const {
@@ -13,17 +12,15 @@ const Input = React.forwardRef<HTMLSpanElement, InputProps>((props, ref) => {
     disabled,
     className,
     placeholder,
+    onChange,
     onPressEnter,
     onKeyPress,
     style,
-    value: valueProp,
-    defaultValue,
+    value,
     inputRef: propsInputRef,
     ...rest
   } = props;
 
-  const [value, setValue] = useControlledState(valueProp, Array.isArray(defaultValue) ? undefined : defaultValue);
-
   const prefixCls = usePrefixCls('input', customizePrefixCls);
   const inputClass = useMemo(
     () =>
@@ -49,6 +46,13 @@ const Input = React.forwardRef<HTMLSpanElement, InputProps>((props, ref) => {
     [onPressEnter, onKeyPress]
   );
 
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      onChange?.(e);
+    },
+    [onChange]
+  );
+
   const prefixFcCls = useMemo(
     () =>
       classNames(`${prefixCls}__prefix`, {
@@ -81,7 +85,7 @@ const Input = React.forwardRef<HTMLSpanElement, InputProps>((props, ref) => {
         {...rest}
         value={value ?? ''}
         disabled={disabled}
-        onChange={(event) => setValue(event.target.value)}
+        onChange={handleChange}
         onKeyPress={handleKeyPress}
         placeholder={placeholder}
         ref={propsInputRef}

src/input/demos/Input.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import { action } from '@storybook/addon-actions';
 import { PlusOutlined, FilterOutlined, EventsPresetOutlined } from '@gio-design/icons';
@@ -337,3 +337,16 @@ InputButtonWidth.args = {
   prefix: <EventsPresetOutlined />,
 };
 InputButtonWidth.storyName = 'Input Button Width 100%';
+
+const ControlInputExample = (args: InputProps) => {
+  const [value, setValue] = useState('');
+  const onChange = useCallback((e) => {
+    console.log('value', e.target.value);
+    setValue(e.target.value);
+  }, []);
+
+  return <Input {...args} value={value} onChange={onChange} style={{ width: 300 }} />;
+};
+
+export const ControlInput = ControlInputExample.bind({});
+ControlInput.args = {};

src/search-bar/demos/SearchBar.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import { action } from '@storybook/addon-actions';
 import SearchBar from '../SearchBar';
@@ -136,3 +136,16 @@ DisableValue.args = {
   value: '数据可视化',
   disabled: true,
 };
+
+const ControlInputExample = (args: SearchBarProps) => {
+  const [value, setValue] = useState('');
+  const onChange = useCallback((e) => {
+    console.log('value', e.target.value);
+    setValue(e.target.value);
+  }, []);
+
+  return <SearchBar {...args} value={value} onChange={onChange} style={{ width: 300 }} />;
+};
+
+export const ControlInput = ControlInputExample.bind({});
+ControlInput.args = {};