fix(component): 修复Select value显示错误的问题

Yoshino-UI · Dec 5, 2018 · e486d83 · e486d83
1 parent 0b16854
commit e486d83
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 13 deletions.
diff --git a/components/Select/Select.tsx b/components/Select/Select.tsx
@@ -1,4 +1,4 @@
-
+// tslint:disable no-any
 import {Component} from 'react';
 import * as React from 'react';
 import * as classNames from 'classnames';
@@ -55,6 +55,8 @@ const {Expand} = Transitions;
  */
 export class Select extends Component<ISelectProps, ISelectState> {
   toggleTimeOutHandle = 0;
+  // 子代value -> text 的 map
+  mapArr: Array<{value: string | number, text: any}> = [];
 
   static defaultProps = {
     mode: 'single',
@@ -121,7 +123,34 @@ export class Select extends Component<ISelectProps, ISelectState> {
     this.setState({visible});
   }
 
+  value2Text = (v?: string | number) => {
+    const { children } = this.props;
+    const mapArr: Array<{value: string | number, text: any}> = [];
+    React.Children.forEach(children, (ele: any) => {
+      if (ele.props.label !== undefined) {
+        if (Array.isArray(ele.props.children)) {
+          React.Children.forEach(ele.props.children, (opt: any) => {
+            mapArr.push({value: opt.props.value, text: opt.props.children});
+          });
+        } else {
+          const opt = ele.props;
+          mapArr.push({value: opt.value, text: opt.children});
+        }
+      } else {
+        const opt = ele.props;
+        mapArr.push({value: opt.value, text: opt.children});
+      }
+    });
+    for (const item of mapArr) {
+      if (item.value === v) {
+        return item.text;
+      }
+    }
+    return '';
+  }
+
   render() {
+    this.value2Text();
     const {
       className, style, onChange,
       value, defaultValue, disabled,
@@ -153,7 +182,6 @@ export class Select extends Component<ISelectProps, ISelectState> {
       </Expand>
     );
     const isSingle = mode === 'single' || !Array.isArray(values);
-
     return (
       <Pop
         content={list}
@@ -178,11 +206,12 @@ export class Select extends Component<ISelectProps, ISelectState> {
             {values.toString() === '' ? <div className={`${preCls}-placeholder`}>{placeholder}</div> : null}
               {
                 mode === 'single' || !Array.isArray(values) ? (
-                  <span>{values}</span>
+                  <span>{this.value2Text(values as string)}</span>
                 ) : (
                   <div className={`${preCls}-container`}>
                     {
                       values.map((item) => {
+                        const v = this.value2Text(item);
                         return (
                           <Tag
                             key={item}
@@ -195,7 +224,7 @@ export class Select extends Component<ISelectProps, ISelectState> {
                               }, 300);
                             }}
                           >
-                            {item}
+                            {v}
                           </Tag>
                         );
                       })

diff --git a/components/Select/style/index.less b/components/Select/style/index.less
@@ -60,6 +60,12 @@
         height: @select-size-large;
         line-height: @select-size-large;
       }
+
+      &-selection {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
   }
 
@@ -132,9 +138,6 @@
   &-selection {
     padding-right: 20px;
     padding-bottom: 4px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 }
 

diff --git a/docs/pages/components/Select/demo/selectDemo.tsx b/docs/pages/components/Select/demo/selectDemo.tsx
@@ -7,15 +7,15 @@ export default function() {
   const style: CSSProperties = {width: 200, display: 'inline-block', marginRight: 20};
   return (
     <div>
-      <Select mode='single' placeholder='请选择' defaultValue={''} style={style}>
+      <Select mode='single' placeholder='请选择' defaultValue={'a'} style={style}>
         <OptGroup label='钉宫四萌'>
-          <Option value='灼眼的夏娜'>灼眼的夏娜灼眼的夏娜灼眼的夏娜灼眼的夏娜灼眼的夏娜灼眼的夏娜灼眼的夏娜</Option>
-          <Option value='零之使魔'>零之使魔</Option>
-          <Option value='旋风管家'>旋风管家</Option>
-          <Option value='龙与虎'>龙与虎</Option>
+          <Option value='a'>灼眼的夏娜灼眼的夏娜灼眼的夏娜灼眼的夏娜灼眼的夏娜灼眼的夏娜灼眼的夏娜</Option>
+          <Option value='v'>零之使魔</Option>
+          <Option value='c'>旋风管家</Option>
+          <Option value='d'>龙与虎</Option>
         </OptGroup>
         <OptGroup label='约会大作战'>
-          <Option value='四系乃' disabled>四系乃</Option>
+          <Option value='f' disabled>四系乃</Option>
         </OptGroup>
       </Select>
       <Select mode='single' placeholder='请选择' defaultValue={'灼眼的夏娜'} style={style} disabled>