修改TagSelect为受控组件 (#763)

* 修改TagSekect组件通过value控制选中项

* 修改TagSelect组件说明文档

* TagSelect组件添加defaultValue的支持

* 在文档中添加defaultValue说明

* 完善tagSelect

* 规范TagSelect中state命名，保持统一

* 修改接收到下一个props时更新state的逻辑判断

* 封装onChange方法，减少重复的逻辑代码

* 避免直接修改state

src/components/TagSelect/index.d.ts

@@ -2,10 +2,11 @@ import * as React from 'react';
 export interface TagSelectProps {
   onChange?: (value: Array<string>) => void;
   expandable?: boolean;
+  value?: Array<string>| Array<number>;
   style?: React.CSSProperties;
 }
 export interface TagSelectOptionProps {
-  value: string;
+  value: string| number;
   style?: React.CSSProperties;
 }
 

src/components/TagSelect/index.js

@@ -21,21 +21,30 @@ TagSelectOption.isTagSelectOption = true;
 class TagSelect extends Component {
   state = {
     expand: false,
-    checkedTags: this.props.defaultValue || [],
+    value: this.props.value || this.props.defaultValue || [],
   };
+  componentWillReceiveProps(nextProps) {
+    if ('value' in nextProps) {
+      this.setState({ value: nextProps.value });
+    }
+  }
 
-  onSelectAll = (checked) => {
+  onChange = (value) => {
     const { onChange } = this.props;
+    if (!('value' in this.props)) {
+      this.setState({ value });
+    }
+    if (onChange) {
+      onChange(value);
+    }
+  }
+
+  onSelectAll = (checked) => {
     let checkedTags = [];
     if (checked) {
       checkedTags = this.getAllTags();
     }
-
-    this.setState({ checkedTags });
-
-    if (onChange) {
-      onChange(checkedTags);
-    }
+    this.onChange(checkedTags);
   }
 
   getAllTags() {
@@ -48,8 +57,7 @@ class TagSelect extends Component {
   }
 
   handleTagChange = (value, checked) => {
-    const { onChange } = this.props;
-    const { checkedTags } = this.state;
+    const checkedTags = [...this.state.value];
 
     const index = checkedTags.indexOf(value);
     if (checked && index === -1) {
@@ -57,12 +65,7 @@ class TagSelect extends Component {
     } else if (!checked && index > -1) {
       checkedTags.splice(index, 1);
     }
-
-    this.setState({ checkedTags });
-
-    if (onChange) {
-      onChange(checkedTags);
-    }
+    this.onChange(checkedTags);
   }
 
   handleExpand = () => {
@@ -78,10 +81,10 @@ class TagSelect extends Component {
   }
 
   render() {
-    const { checkedTags, expand } = this.state;
+    const { value, expand } = this.state;
     const { children, className, style, expandable } = this.props;
 
-    const checkedAll = this.getAllTags().length === checkedTags.length;
+    const checkedAll = this.getAllTags().length === value.length;
 
     const cls = classNames(styles.tagSelect, className, {
       [styles.hasExpandTag]: expandable,
@@ -97,11 +100,12 @@ class TagSelect extends Component {
           全部
         </CheckableTag>
         {
-          checkedTags && React.Children.map(children, (child) => {
+          value && React.Children.map(children, (child) => {
             if (this.isTagSelectOption(child)) {
               return React.cloneElement(child, {
                 key: `tag-select-${child.props.value}`,
-                  checked: checkedTags.indexOf(child.props.value) > -1,
+                value: child.props.value,
+                checked: value.indexOf(child.props.value) > -1,
                 onChange: this.handleTagChange,
               });
             }

src/components/TagSelect/index.md

@@ -15,6 +15,8 @@ order: 13
 
 | 参数      | 说明                                      | 类型         | 默认值 |
 |----------|------------------------------------------|-------------|-------|
+| value    |选中的项              |string[] \| number[] | |
+| defaultValue    |默认选中的项   |string[] \| number[] | |
 | onChange | 标签选择的回调函数 | Function(checkedTags) |  |
 | expandable | 是否展示 `展开/收起` 按钮 | Boolean | false |
 
@@ -23,5 +25,5 @@ order: 13
 
 | 参数      | 说明                                      | 类型         | 默认值 |
 |----------|------------------------------------------|-------------|-------|
-| value | TagSelect的值  | Function(checkedTags) | - |
+| value | TagSelect的值  | string\| number | - |
 | children | tag的内容 | string \| ReactNode | - |