反応のスワイプ効果

Question

リアクションを使用してスワイプイベントを作成しようとしています。私は外部コンポーネントやjqueryを使用したくありません。私はスワイプイベントを認識することができますどのように

class Test extends React.Component { 
    constructor(props){ 
    super(props); 

    this.state = { 
     left: 0 
    } 
    } 

    handleSwipe(){ 
    this.setState({left: -350}) 
    } 

    render(){ 
    return(
     <div className="outter"> 
      <div className="inner" style={{left: this.state.left}} onSwipe={this.handleSwipe.bind(this)}> 
       <div className="child"><img src="http://placehold.it/350x150" /></div> 
       <div className="child"><img src="http://placehold.it/350x150" /></div> 
       <div className="child"><img src="http://placehold.it/350x150" /></div> 
       <div className="child"><img src="http://placehold.it/350x150" /></div> 
      </div> 
     </div> 
    ) 
    } 
} 

React.render(<Test />, document.getElementById('container')); 

：私のような何かをしようとしている反応成分が

.outter{ 
    position:relative; 
    width: 100%; 
    height: 150px; 
    background-color: blue; 
} 

.inner{ 
    position: absolute; 
    width: 1000%; 
    left: 50px; 
} 
.child{ 
    float: left; 
    margin-right: 15px; 
} 

：

CSSのようなものでしょうか？

私の例ではonSwipeの代わりにonClickを追加しますが、どうすればスワイプ効果が得られますか？

ここはjsfiddleです。

Answer 1

あなたのコンポーネントを反応させるonTouchイベントハンドラを追加することができます。

onTouchStart={touchStartEvent => this.handleTouchStart(touchStartEvent)} 
onTouchMove={touchMoveEvent => this.handleTouchMove(touchMoveEvent)} 
onTouchEnd={() => this.handleTouchEnd()} 

ます。また、クロスプラットフォームの互換性のためのマウスイベントのイベントハンドラを追加することもできます。

onMouseDown={mouseDownEvent => this.handleMouseDown(mouseDownEvent)} 
onMouseMove={mouseMoveEvent => this.handleMouseMove(mouseMoveEvent)} 
onMouseUp={() => this.handleMouseUp()} 
onMouseLeave={() => this.handleMouseLeave()} 

あなたが権利を持っていますイベントハンドラの状態のleftプロパティを更新するアイデアですが、スワイプ機能を自然に感じたい場合は、leftを更新してポインタの位置を追跡する必要がありますイベントのclientXプロパティを使用します。

これを行うには、最初のタッチの位置を保存し、leftをタッチの位置の変化と同じに設定する必要があります。リアリズムを追加するには、タッチの速度を追跡し、タッチが終了した後もコンポーネントのアニメーションを続けることができます。ここで

は、私は、リストから項目を削除するためにスワイプするために作られた間に合わせのn-codepenです：あなたは本当にそれを自分で行いたい場合は

https://codepen.io/swingthing/pen/ZBGBJb/