React-dnd: 如何在 connectDropTarget 组件中使用调度？

创建于 2016-02-26 · 4评论 · 资料来源: react-dnd/react-dnd

当我使用 react-DND 时，发现了一个问题。

问题，我想在 connectDropTarget 组件中使用调度。

const dropTodoTarget = {
  drop(props,monitor,component) {
      var todo = monitor.getItem();
      if (todo.board_id != props.board_id) {
          component.localHandleMove(todo.todo_id);
      }
      return {};
  }
};


function collect(connect, monitor) {
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver()
  };
}
export default class TodoList extends Component {

    constructor(props) {
        super(props);
        this.localHandleMove = this.localHandleMove.bind(this);
    }

    localHandleMove(todo_id)  {
        this.props.dispatch(actions.completeTodo(todo_id,this.props.board_id))
    }

    render() {
        const { connectDropTarget } = this.props;
        //                  
        return connectDropTarget(
            <ul className="todo-list">
            {this.props.todos.map(function(todo){
               return <Todo key={todo.todo_id} todo={todo} />
            })}
            </ul>
        );
    } 
}


export default flow(
  connect(),
  DropTarget(ItemTypes.TODO, dropTodoTarget, collect)
)(TodoList);

当我这样写的时候。

Uncaught TypeError: component.localHandleMove is not a function

我想如何在组件中使用 dispatch ？

谢谢

资料来源

dreamcog

最有用的评论

不， component.store是一个实例变量，它是一个私有 API，在任何地方都没有记录。它可能会在任何版本的 React Redux 中消失，所以请不要依赖它。

你想要的是把connect() _after_ DropTarget()以便由connect() （包括dispatch ）注入的道具可以在放置目标中使用：

const dropTodoTarget = {
  drop(props,monitor,component) {
      var todo = monitor.getItem();
      if (todo.board_id != props.board_id) {
          props.dispatch(actions.completeTodo(todo.board_id,this.props.board_id))
      }
      return {};
  }
};

// ...

export default flow(
  DropTarget(ItemTypes.TODO, dropTodoTarget, collect),
  connect()
)(TodoList);

gaearon 于 2016-02-28

👍6 ❤2

所有4条评论

最后，我发现可以这样做：

const dropTodoTarget = {
      drop(props,monitor,component) {
      var todo = monitor.getItem();
      if (todo.board_id != props.board_id) {
    component.store.dispatch(actions.moveTodoBoard(todo.todo_id,todo.board_id,props.board_id));
      }
      return {};
  }
};

dreamcog 于 2016-02-26

不， component.store是一个实例变量，它是一个私有 API，在任何地方都没有记录。它可能会在任何版本的 React Redux 中消失，所以请不要依赖它。

你想要的是把connect() _after_ DropTarget()以便由connect() （包括dispatch ）注入的道具可以在放置目标中使用：

const dropTodoTarget = {
  drop(props,monitor,component) {
      var todo = monitor.getItem();
      if (todo.board_id != props.board_id) {
          props.dispatch(actions.completeTodo(todo.board_id,this.props.board_id))
      }
      return {};
  }
};

// ...

export default flow(
  DropTarget(ItemTypes.TODO, dropTodoTarget, collect),
  connect()
)(TodoList);

gaearon 于 2016-02-28

👍6 ❤2

您想要的是将 connect() 放在 DropTarget() 之后...

不是应该先来吗？

shem86 于 2016-03-03

👍5

不， component.store是一个实例变量，它是一个私有 API，在任何地方都没有记录。它可能会在任何版本的 React Redux 中消失，所以请不要依赖它。
你想要的是把connect() _after_ DropTarget()以便由connect() （包括dispatch ）注入的道具可以在放置目标中使用：
const dropTodoTarget = {
  drop(props,monitor,component) {
      var todo = monitor.getItem();
      if (todo.board_id != props.board_id) {
          props.dispatch(actions.completeTodo(todo.board_id,this.props.board_id))
      }
      return {};
  }
};

// ...

export default flow(
  DropTarget(ItemTypes.TODO, dropTodoTarget, collect),
  connect()
)(TodoList);

这里的flow什么？

gl2748 于 2019-04-19

此页面是否有帮助？

0 / 5 - 0 等级

React-dnd: 如何在 connectDropTarget 组件中使用调度？

最有用的评论

所有4条评论

相关问题