modified SlideChangeHooks example to include state changes and remove…

…d BeforeChangeSetState example
CptCompiler · Mar 12, 2018 · c18b267 · c18b267
1 parent f786e5c
commit c18b267
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 44 deletions.
diff --git a/docs/demos.jsx b/docs/demos.jsx
@@ -30,13 +30,11 @@ import CustomPaging from '../examples/CustomPaging'
 import CustomSlides from '../examples/CustomSlides'
 import AsNavFor from '../examples/AsNavFor'
 import AppendDots from '../examples/AppendDots'
-import BeforeChangeSetState from '../examples/BeforeChangeSetState'
 
 export default class App extends React.Component {
   render() {
     return (
       <div className='content'>
-        <BeforeChangeSetState />
         <SimpleSlider />
         <MultipleItems />
         <Responsive />

diff --git a/examples/BeforeChangeSetState.js b/examples/BeforeChangeSetState.js
diff --git a/examples/SlideChangeHooks.js b/examples/SlideChangeHooks.js
@@ -2,23 +2,25 @@ import React, { Component } from 'react'
 import Slider from '../src/slider'
 
 export default class SlideChangeHooks extends Component {
+  state = {
+    activeSlide: 0,
+    activeSlide2: 0
+  }
   render() {
     const settings = {
       dots: true,
       infinite: true,
-      speed: 500,
+      speed: 1000,
       slidesToShow: 1,
       slidesToScroll: 1,
-      beforeChange: function (currentSlide, nextSlide) {
-        console.log('before change', currentSlide, nextSlide);
-      },
-      afterChange: function (currentSlide) {
-        console.log('after change', currentSlide);
-      },
+      beforeChange: (current, next) => this.setState({ activeSlide: next }),
+      afterChange: current => this.setState({ activeSlide2: current }),
     };
     return (
       <div>
         <h2>beforeChange and afterChange hooks</h2>
+        <p>BeforeChange => activeSlide: <strong>{this.state.activeSlide}</strong></p>
+        <p>AfterChange => activeSlide: <strong>{this.state.activeSlide2}</strong></p>
         <Slider {...settings}>
           <div><h3>1</h3></div>
           <div><h3>2</h3></div>