update tag demo

components/tag/demo/control.md

@@ -1,11 +1,11 @@
 ---
 order: 2
-title: 数据生成标签
+title: 动态添加和删除
 ---
 
-用数组生成一组标签。
+用数组生成一组标签，可以动态添加和删除。
 
-> 使用 `afterClose` 而不是 `onClose`，删除时有动画效果。
+> 使用 `afterClose` 删除时有动画效果。
 
 ````jsx
 import { Tag, Button } from 'antd';
@@ -15,20 +15,12 @@ const App = React.createClass({
   getInitialState() {
     return {
       tags: [
-        { key: 1, name: '标签一' },
+        { key: 1, name: '不可移除' },
         { key: 2, name: '标签二' },
+        { key: 3, name: '标签三' },
       ],
     };
   },
-  onClose(key, e) {
-    e.preventDefault();
-    if (key === 1) {
-      console.log('can not close it', this.state.tags);
-      this.setState({ tags: [...this.state.tags] });
-      return;
-    }
-    this.handleClose(key);
-  },
   handleClose(key) {
     const tags = [...this.state.tags].filter(tag => (tag.key !== key) && tag);
     console.log(tags);
@@ -41,15 +33,15 @@ const App = React.createClass({
     this.setState({ tags });
   },
   render() {
+    const { tags } = this.state;
     return (
       <div>
-        {this.state.tags.map(tag =>
-          <Tag key={tag.key} closable onClose={(e) => this.onClose(tag.key, e)}
-            afterClose={() => this.handleClose(tag.key)}>{tag.name}</Tag>
+        {tags.map(tag =>
+          <Tag key={tag.key} closable={tag.key !== 1} afterClose={() => this.handleClose(tag.key)}>
+            {tag.name}
+          </Tag>
         )}
-        <div>
-          <Button onClick={this.addTag}>添加标签</Button>
-        </div>
+        <Button size="small" type="primary" onClick={this.addTag}>添加标签</Button>
       </div>
     );
   }

components/tag/index.jsx

@@ -25,9 +25,10 @@ export default class Tag extends React.Component {
     this.props.onClose(e);
     if (e.defaultPrevented) return;
     const dom = ReactDOM.findDOMNode(this);
-    dom.style.width = `${dom.offsetWidth}px`;
+    const domWidth = dom.getBoundingClientRect().width;
+    dom.style.width = `${domWidth}px`;
     // It's Magic Code, don't know why
-    dom.style.width = `${dom.offsetWidth}px`;
+    dom.style.width = `${domWidth}px`;
     this.setState({
       closing: true,
     });