Question

未调用构建器操作 positionRComponent 。难道我做错了什么？查看BuildView.js中moveBox函数中的commentLine

期望输出：在控制台中打印。

位置R组件

以下是BuildView.js和builder-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
    })
  }
}

Answer 1

使用call或从bind执行返回的功能：

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

或：

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

差异是bind没有执行但返回一个新函数，参数列表传递给新函数。

call基本上会执行bind，apply类似但会接受一系列参数。

希望它有所帮助。

没有被召唤的行动 - 通量反应

1 个答案: