From 41a1798af30a223d001002fb3b67b214f356555c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <qixian.cs@outlook.com>
Date: Sun, 30 Sep 2018 16:44:18 +0800
Subject: [PATCH] add new TagSelect demo

---
 src/components/TagSelect/demo/controlled.md | 50 +++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 src/components/TagSelect/demo/controlled.md

diff --git a/src/components/TagSelect/demo/controlled.md b/src/components/TagSelect/demo/controlled.md
new file mode 100644
index 00000000..4e9defa7
--- /dev/null
+++ b/src/components/TagSelect/demo/controlled.md
@@ -0,0 +1,50 @@
+---
+order: 3
+title: 受控模式
+---
+
+结合 `Tag` 的 `TagSelect` 组件，方便的应用于筛选类目的业务场景中。
+
+```jsx
+import { Button } from 'antd';
+import TagSelect from 'ant-design-pro/lib/TagSelect';
+
+class Demo extends React.Component {
+  state = {
+    value: ['cat1'],
+  };
+  handleFormSubmit = value => {
+    this.setState({
+      value,
+    });
+  };
+  checkAll = () => {
+    this.setState({
+      value: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6'],
+    });
+  };
+  render() {
+    return (
+      <div>
+        <Button onClick={this.checkAll}>全部</Button>
+        <div
+          style={{
+            padding: 16,
+          }}
+        >
+          <TagSelect hideCheckAll={true} value={this.state.value} onChange={this.handleFormSubmit}>
+            <TagSelect.Option value="cat1">类目一</TagSelect.Option>
+            <TagSelect.Option value="cat2">类目二</TagSelect.Option>
+            <TagSelect.Option value="cat3">类目三</TagSelect.Option>
+            <TagSelect.Option value="cat4">类目四</TagSelect.Option>
+            <TagSelect.Option value="cat5">类目五</TagSelect.Option>
+            <TagSelect.Option value="cat6">类目六</TagSelect.Option>
+          </TagSelect>
+        </div>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<Demo />, mountNode);
+```
-- 
GitLab