2016-04-20 30 views
1

ビルダの動作位置RComponentが呼び出されていません。私は何か間違っているのですか? BuildView.jsのmoveBox関数内のcommentLineをチェックしてください。アクションが呼び出されない - フラックスが反応する

Expecting output:コンソールに出力されます。

位置Rコンポーネントの下

はBuildView.js及びビルダー-actions.jsのコードスニペットです。

BuildView.js

import React, {PropTypes} from 'react'; 
import BuilderStore from '../stores/builder-store'; 
import BuilderActions from '../actions/builder-actions' 
import update from 'react/lib/update'; 
import ItemTypes from './ItemTypes'; 
import RComponent from './RComponent'; 
import { DropTarget } from 'react-dnd'; 
import HTML5Backend from 'react-dnd-html5-backend'; 

function getViewRComponents(){ 
    return({components: BuilderStore.getViewRComponents()}) 
} 
const rComponentTarget = { 
    drop(props, monitor, component) { 
    const item = monitor.getItem(); 
    const delta = monitor.getDifferenceFromInitialOffset(); 
    const left = Math.round(item.left + delta.x); 
    const top = Math.round(item.top + delta.y); 
    component.moveBox(item.id, left, top); 
    } 
}; 

const wrapper = { 
    border: '1px solid grey' 
} 

function collect(connect, monitor){ 
    return ({ 
    connectDropTarget: connect.dropTarget() 
    }) 
} 

class BuildView extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state = getViewRComponents(); 
    this._onChange = this._onChange.bind(this); 
    } 
    moveBox(id, left, top) { 

    this.setState(update(this.state, { 
     components: { 
     [id]: { 
      $merge: { 
      left: left, 
      top: top 
      } 
     } 
     } 
    })); 
    //CALLING HERE>>> Not getting called 
    BuilderActions.positionRComponent.bind(null, this.state.components[id]); 

    } 
    componentWillMount(){ 
    BuilderStore.addChangeListener(this._onChange) 
    } 
    render(){ 
    const { hideComponentOnDrag, connectDropTarget } = this.props; 

    let components = this.state.components.map((component, index) => { 
     return(<RComponent 
     key={index} 
     id={index} 
     left={component.left} 
     top={component.top} 
     hideComponentOnDrag={hideComponentOnDrag}> 
     {component.name} 
     </RComponent>); 
    }) 
    return connectDropTarget(
     <div> 
     {components} 
     </div> 

    ); 
    } 
    _onChange(){ 
    this.setState(getViewRComponents()); 
    } 
    componentWillUnMount(){ 
    BuilderStore.removeChangeListener(this._onChange()) 
    } 
} 
BuildView.propTypes = { 
    hideComponentOnDrag: PropTypes.bool.isRequired, 
    connectDropTarget: PropTypes.func.isRequired 
}; 

export default DropTarget(ItemTypes.RCOMPONENT,rComponentTarget, collect)(BuildView); 

ビルダー-actions.js

import BuilderConstants from '../constants/builder-constants'; 
import {dispatch, register} from '../dispatchers/builder-dispatcher'; 

export default { 
    addRComponent(component) { 
    console.log("Add R Component") 
    dispatch({ 
     actionType: BuilderConstants.ADD_RCOMPONENT, component 
    }) 
    }, 
    removeRComponent(component){ 
    dispatch({ 
     actionType: BuilderConstants.REMOVE_RCOMPONENT, component 
    }) 
    }, 
    positionRComponent(component){ 
    console.log("Position R Component"); 
    dispatch({ 
     actionType: BuilderConstants.POSITION_RCOMPONENT, component 
    }) 
    } 
} 
+0

@jm_____ moveBoxのsetStateが機能します。私はそれが問題だとは思わない – Kaushik

+1

ドキュメントを読んだ後、あなたは正しいです。もしあなたが 'bind'の代わりに' call'を試してしまったらどうなりますか?私はそれが新しい関数を返すと思いますか? – jmunsch

+1

は 'BuilderActions.positionRComponent.bind(null、this.state.components [id])();'またはおそらく 'BuilderActions.positionRComponent.call(null、this.state.components [id]); ' – jmunsch

答えて

1

使用callまたはbindから返された機能を実行します。

var f = BuilderActions.positionRComponent.bind(null, this.state.components[id]) 
f() 

か:

BuilderActions.positionRComponent.call(null, this.state.components[id]); 

違いはbindで実行されませんが、新しい関数に渡される引数リストに新しい関数を返します。

callbindが実行されます。applyは類似していますが、引数の配列をとります。

希望します。

関連する問題