fix: 修复 select 选中 值的bug

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chocolate-ui",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Indulge in silky smoothness",
   "author": "shiming_xsm",
   "private": false,

src/components/Input/input.tsx

@@ -22,11 +22,20 @@ export interface InputProps
   prepend?: string | ReactElement;
   append?: string | ReactElement;
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-  ref?: any,
+  ref?: any;
 }
 
 export const Input: FC<InputProps> = forwardRef((props, ref) => {
-  const { disabled, size, icon, prepend, append, style, ...restProps } = props;
+  const {
+    disabled,
+    size,
+    icon,
+    prepend,
+    append,
+    style,
+    onChange = () => {},
+    ...restProps
+  } = props;
   const [hover, setHover] = useState(false);
   const classnames = classNames(sc("wrapper"), {
     [`input-size-${size}`]: size,
@@ -61,6 +70,7 @@ export const Input: FC<InputProps> = forwardRef((props, ref) => {
         onMouseOver={() => setHover(!disabled)}
         onMouseLeave={() => setHover(false)}
         disabled={disabled}
+        onChange={onChange}
         {...restProps}
       />
       {append && <div className={sc("group-append")}>{append}</div>}

src/components/Select/select.tsx

@@ -75,7 +75,6 @@ export const Select: React.FC<SelectProps> = (props) => {
           icon="angle-down"
           disabled={disabled}
           placeholder={placeholder}
-          // readOnly={!disabled}
           onClick={() => setShowOption(true)}
           value={inputValue}
         />

src/components/Select/selectOption.tsx

@@ -1,51 +1,48 @@
-import React, { useContext, useState } from 'react'
-import classNames from 'classnames'
-import { scopedClass } from '../../utils/scopedClass'
-import { SelectContext } from './select'
+import React, { MouseEvent, useContext, useState } from "react";
+import classNames from "classnames";
+import { scopedClass } from "../../utils/scopedClass";
+import { SelectContext } from "./select";
 
 export interface SelectOptionProps {
-  value: string,
-  children: React.ReactNode,
-  disabled?: boolean,
-  active?: boolean,
+  value: string;
+  children: React.ReactNode;
+  disabled?: boolean;
+  active?: boolean;
 }
 
-const sc = scopedClass('chocolate-select')
+const sc = scopedClass("chocolate-select");
 
 const SelectOption: React.FC<SelectOptionProps> = (props) => {
-  const {
-    value,
-    children,
-    ...restProps
-  } = props
-  const context = useContext(SelectContext)
-  const [hover, setHover] = useState(false)
+  const { value, children, ...restProps } = props;
+  const context = useContext(SelectContext);
+  const [hover, setHover] = useState(false);
 
-  const handleOptionItem = (item: string) => {
+  const handleOptionItem = (e: MouseEvent<HTMLLIElement>) => {
+    const _value = (e.target as any).innerHTML;
     if (!props.disabled) {
-      context.onSelect && context.onSelect(item)
-      context.onShowOption && context.onShowOption(false)
+      context.onSelect && context.onSelect(_value);
+      context.onShowOption && context.onShowOption(false);
     }
-  }
-  const classnames = classNames(sc('option-list-item'), {
-    'is-disabled': props.disabled,
-    'is-active': value === context.value,
-    'is-hover': hover,
-  })
+  };
+  const classnames = classNames(sc("option-list-item"), {
+    "is-disabled": props.disabled,
+    "is-active": value === context.value,
+    "is-hover": hover,
+  });
   return (
     <li
       className={classnames}
-      onMouseOver={()=>{
-        if(!props.disabled){
-          setHover(true)
+      onMouseOver={() => {
+        if (!props.disabled) {
+          setHover(true);
         }
       }}
-      onMouseLeave={()=>setHover(false)}
-      onClick={() => handleOptionItem(value)}
+      onMouseLeave={() => setHover(false)}
+      onClick={handleOptionItem}
       {...restProps}
     >
       {children}
     </li>
-  )
-}
-export default SelectOption
+  );
+};
+export default SelectOption;

src/introduction.md

@@ -12,6 +12,12 @@ npm install chocolate-ui --save
 yarn add chocolate-ui
 `
 
+##### 💁‍♂️ 在线演示
+
+[chocolate-ui.com](https://60e31bd4495b7b003b0b96a3-qwpgkogipx.chromatic.com/)
+
+[![Edit nn6yr2m94](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/agitated-lamarr-2t34j?autoresize=1&hidenavigation=1&expanddevtools=1)
+
 #### 📖 使用
 
 1、引入

src/welcome.stories.tsx

@@ -29,6 +29,18 @@ storiesOf('Welcome page', module)
         <p> <span role="img" aria-label="chocolateUi" >🍫</span> Chocolate-Ui 即插即用，纵享丝滑 <span role="img" aria-label="chocolateUi" > 🎗️</span></p>
         <p> 一个 Web 端的 React 组件库 </p>
         <p> 此刻尽丝滑！ </p>
+        <iframe
+          src="https://codesandbox.io/s/agitated-lamarr-2t34j?autoresize=1&hidenavigation=1&expanddevtools=1"
+          style={{
+            width: "100%",
+            height: "555px",
+            border: 0,
+            borderRadius: "4px",
+            overflow: "hidden",
+            margin: "50px 0"
+          }}
+          sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+        />
       </div>
       <div style={{ display: 'flex', flexDirection: 'column' }}>
         <ReactMarkDown