ReactとReact-DraggableのsetStateの問題

Question

reactのsetState関数に問題があります。私は反応ドラッグ可能なパッケージを使用していると私は周りに私のdivをドラッグすることができますが、私はマウスボタンをリリースすると、x yの座標を設定するように見えないので、divはちょうど元に戻ってスナップします。誰かが私がonControlledDragでここで間違っていることを教えてもらえますか？ありがとう！コンストラクタで

export class DraggableAnswer extends React.Component { 
    constructor(props, context) { 
    super(props, context); 

    this.controlledPosition ={ x: -25, y: 10}; 
    } 
    onControlledDrag(e, position) { 
    console.log(position); 
    const {x, y} = position; 
    this.setState({ 
     controlledPosition: {x: x, y: y} 
    }); 
    } 


    render() { 
    const dragHandlers = {onStart: this.onStart, onStop: this.onStop};  

    return (
     <div className="draggableAnswerBlock"> 
      <Draggable 
       zIndex={100} 
       position={this.controlledPosition} 
       {...dragHandlers} 
       onDrag={this.onControlledDrag.bind(this)}> 
       <div className="box"> 
        Change my position 
       </div> 
      </Draggable> 
     </div> 
    ) 
    } 
} 

Answer 1

それは次のようになります。

constructor(props, context) { 
    super(props, context); 

    this.state = { controlledPosition: { x: -25, y: 10} }; 
} 

、その後、リターンであなたをドラッグ可能にthis.state.controlledPositionを渡す必要があります。今すぐthis.controlledPositionは更新されないので、ドラッグが完了するとリセットされます。