Improve Affix target demo code style, close #4037

components/affix/demo/target.md

@@ -16,36 +16,32 @@ Set a `target` for 'Affix', which is listen to scroll event of target element (d
 ````jsx
 import { Affix, Button } from 'antd';
 
-const Demo = () => {
+class Demo extends React.Component {
-  return (
+  render() {
-    <div className="view-port">
+    return (
-      <div id="scrollable-container">
+      <div className="scrollable-container" ref={(node) => { this.container = node; }}>
         <div className="background">
-          <br />
+          <Affix target={() => this.container}>
-          <br />
+            <Button type="primary">
-          <br />
+              Fixed at the top of container
-          <Affix target={() => document.getElementById('scrollable-container')} offsetTop={20}>
+            </Button>
-            <Button type="primary">Fixed at the top of container</Button>
           </Affix>
         </div>
       </div>
-    </div>
+    );
-  );
+  }
-};
+}
 
 ReactDOM.render(<Demo />, mountNode);
 ````
 
 <style>
-#components-affix-demo-target .view-port {
+#components-affix-demo-target .scrollable-container {
   height: 100px;
-  overflow: hidden;
-}
-#components-affix-demo-target #scrollable-container {
-  height: 100%;
   overflow-y: scroll;
 }
 #components-affix-demo-target .background {
+  padding-top: 60px;
   height: 300px;
   background-image: url('https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg');
 }

components/affix/index.tsx

@@ -64,6 +64,7 @@ export default class Affix extends React.Component<AffixProps, any> {
 
   scrollEvent: any;
   resizeEvent: any;
+  timeout: any;
   refs: {
     fixedNode: HTMLElement;
   };
@@ -172,7 +173,10 @@ export default class Affix extends React.Component<AffixProps, any> {
 
   componentDidMount() {
     const target = this.props.target || getDefaultTarget;
-    this.setTargetEventListeners(target);
+    // Wait for parent component ref has its value
+    this.timeout = setTimeout(() => {
+      this.setTargetEventListeners(target);
+    });
   }
 
   componentWillReceiveProps(nextProps) {
@@ -187,10 +191,14 @@ export default class Affix extends React.Component<AffixProps, any> {
 
   componentWillUnmount() {
     this.clearScrollEventListeners();
+    clearTimeout(this.timeout);
   }
 
   setTargetEventListeners(getTarget) {
     const target = getTarget();
+    if (!target) {
+      return;
+    }
     this.scrollEvent = addEventListener(target, 'scroll', this.updatePosition);
     this.resizeEvent = addEventListener(target, 'resize', this.updatePosition);
   }